1

quiero que una imagen tenga la forma de un svg que hice pero usar el atributo background-image no funciona, en otros foros decían que usara lo siguiente:

<defs>
 <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
   <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
 </pattern></defs>

Pero no me funciono: este es el codigo de mi svg completo aplicando la solución que no funciono

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
                <style type="text/css">
                    .st9465
                    {
                        fill: transparent;
                        border: 1px solid black;
                    }
                </style>
                <defs>
                    <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500">
                        <image xlink:href="../../../../assets/images/misa.jpg" x="0" y="0" width="500" height="500" />
                    </pattern>
                </defs>
                <path fill="url(#massImage)" class="st9465" 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>

9
  • Se supone que SVG significa "Scalable Vectorial Graphics", poder poner una imagen de fondo a un SVG contradeciría a su propia naturaleza, ya que las imagenes normales no son escalables (hablo de escalables sin que pierdan calidad), un SVG no pierde calidad al escalarse, por lo tanto, lo que pides aunque fuera posible no seria recomendable pues el poner una imagen dentro de un SVG no la vuelve escalable sin perdida de calidad.
    – Layer
    Commented el 18 ago. 2020 a las 16:37
  • Por cierto los SVG estan construidos apartir de muchos vectores, mientras que las imagenes estan construidas por pixeles, por lo que hay que hacer una pequeña distinción aquí, yo te recomendaria en su lugar si necesitas agregarle una imagen de fondo al SVG, que no se la agregues directamente al SVG si no que crees un contenedor del SVG el cual sera el que tenga la propiedad background-image y no el SVG en si.
    – Layer
    Commented el 18 ago. 2020 a las 16:39
  • Ahhh otra forma seria usar el elemento canvas para dibujar tu SVG y dibujar dentro la imagen que necesitas haciendo clipping, (canvas puede dibujar directamente SVG), checa esta pregunta que hice hace un tiempo acerca de un tema parecido. es.stackoverflow.com/questions/251163/…
    – Layer
    Commented el 18 ago. 2020 a las 16:42
  • Quiza de por si la respuesta te parezca algo confusa pero te ayudara saber sobre los metodos beginPath(); closePath(); y clip();, de canvas para poder obtener lo que deseas.
    – Layer
    Commented el 18 ago. 2020 a las 16:45
  • con canvas puedo incluso crear figuras irregulares?, porque lo que busco en un circulo levemente deformado. para usar canvas es mas facil con una librería o directamente con mi propio codigo? o sabes si hay algun generador? Commented el 18 ago. 2020 a las 16:48

1 respuesta 1

1

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.

4
  • svg{width: 300px} va en el archivo .ts? (estoy trabajando con angular) Commented el 24 ago. 2020 a las 17:41
  • Utilicé ´svg{width: 300px}` porque no quería que fuera tan grande. Tu puedes utilizar lo que tu quieres o no utilizarlo. Si no le das una anchura o altura el elemento svg toma la anchura del elemento padre
    – enxaneta
    Commented el 24 ago. 2020 a las 17:55
  • como puedo asignar el atributo xlink:href con una directiva de angular?, es que necesito que sea dinamico, para eso uso la dirección del archivo desde un objeto en el archivo .ts, pero me da el error Can't bind to ':xlink:href' since it isn't a known property of ':svg:image' Commented el 25 ago. 2020 a las 20:16
  • Tendrás que establecer el valor del atributo xlink:href utilizando setAttributeNS. Por favor haz una nueva pregunta aportando todos los datos necesarios,
    – enxaneta
    Commented el 25 ago. 2020 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.