Skip to main content
cuerpo editado
Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

Puedes utilizar un patronpatrón de esta manera:

svg{width:300px;}
 <svg viewBox="0 0 500 500">

   <defs>
     <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500">
       <image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" />
     </pattern>
   </defs>
   <path fill="url(#massImage)" stroke="black" d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z" />
 </svg>

Otra opción sería utilizar clipPath:

svg{width:300px;}
<svg viewBox="0 0 500 500"> 
<clipPath id="clip1" >
  <path d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z"  />
</clipPath>
<image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" clip-path="url(#clip1)" />
  </svg>

Por favor observa que en los dos casosla imagen tiene la altura y la anchura original width="1024" height="680" y es más grande que el patrón o el clipPath. Puedes cambiar las dimensiones de la imagen si quieres pero en este caso tendrías que guardar las mismas proporciones.

En mis ejemplos he añadido svg{width:300px} De lo contrario el elemento svg tomará toda la anchura disponible y saldría de la pantalla. Tu puedes utilizar lo que tu quieres.

Puedes utilizar un patron de esta manera:

svg{width:300px;}
 <svg viewBox="0 0 500 500">

   <defs>
     <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500">
       <image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" />
     </pattern>
   </defs>
   <path fill="url(#massImage)" stroke="black" d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z" />
 </svg>

Otra opción sería utilizar clipPath:

svg{width:300px;}
<svg viewBox="0 0 500 500"> 
<clipPath id="clip1" >
  <path d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z"  />
</clipPath>
<image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" clip-path="url(#clip1)" />
  </svg>

Por favor observa que en los dos casosla imagen tiene la altura y la anchura original width="1024" height="680" y es más grande que el patrón o el clipPath. Puedes cambiar las dimensiones de la imagen si quieres pero en este caso tendrías que guardar las mismas proporciones.

En mis ejemplos he añadido svg{width:300px} De lo contrario el elemento svg tomará toda la anchura disponible y saldría de la pantalla. Tu puedes utilizar lo que tu quieres.

Puedes utilizar un patrón de esta manera:

svg{width:300px;}
 <svg viewBox="0 0 500 500">

   <defs>
     <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500">
       <image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" />
     </pattern>
   </defs>
   <path fill="url(#massImage)" stroke="black" d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z" />
 </svg>

Otra opción sería utilizar clipPath:

svg{width:300px;}
<svg viewBox="0 0 500 500"> 
<clipPath id="clip1" >
  <path d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z"  />
</clipPath>
<image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" clip-path="url(#clip1)" />
  </svg>

Por favor observa que en los dos casosla imagen tiene la altura y la anchura original width="1024" height="680" y es más grande que el patrón o el clipPath. Puedes cambiar las dimensiones de la imagen si quieres pero en este caso tendrías que guardar las mismas proporciones.

En mis ejemplos he añadido svg{width:300px} De lo contrario el elemento svg tomará toda la anchura disponible y saldría de la pantalla. Tu puedes utilizar lo que tu quieres.

Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

Puedes utilizar un patron de esta manera:

svg{width:300px;}
 <svg viewBox="0 0 500 500">

   <defs>
     <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500">
       <image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" />
     </pattern>
   </defs>
   <path fill="url(#massImage)" stroke="black" d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z" />
 </svg>

Otra opción sería utilizar clipPath:

svg{width:300px;}
<svg viewBox="0 0 500 500"> 
<clipPath id="clip1" >
  <path d="M0.6,270.1C0.6,120,165.2-27.4,309.5,4.4c200.1,44.1,228.1,302.5,150.6,406.5C351.4,556.8,0.6,445.4,0.6,270.1z"  />
</clipPath>
<image xlink:href="https://assets.codepen.io/222579/castell.jpg" x="0" y="0" width="1024" height="680" clip-path="url(#clip1)" />
  </svg>

Por favor observa que en los dos casosla imagen tiene la altura y la anchura original width="1024" height="680" y es más grande que el patrón o el clipPath. Puedes cambiar las dimensiones de la imagen si quieres pero en este caso tendrías que guardar las mismas proporciones.

En mis ejemplos he añadido svg{width:300px} De lo contrario el elemento svg tomará toda la anchura disponible y saldría de la pantalla. Tu puedes utilizar lo que tu quieres.