Rellene el elemento de ruta SVG con una imagen de fondo

166

¿Es posible establecer un background-imagepara un <path>elemento SVG ?

Por ejemplo, si configuro el elemento class="wall", el estilo CSS .wall {fill: red;}funciona, pero .wall{background-image: url(wall.jpg)}tampoco lo hace .wall {background-color: red;}.

— jbochi
fuente

Muestra cómo configurar la imagen de fondo para el texto SVG, opcionalmente por carácter: stackoverflow.com/a/10853878/405017

— Phrogz

para aquellos que buscan un poco más de información profunda, consulte este enlace del

— Paulo Bueno

261

Puede hacerlo convirtiendo el fondo en un patrón :

<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>

Ajuste el ancho y la altura de acuerdo con su imagen, luego haga referencia desde la ruta de esta manera:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

Ejemplo de trabajo

— robertc
fuente

muy bien, ¿funciona esto también con imágenes base64? en lugar de wall.jpg algo como data:image/png;base64,iVBORw0KGgoAAlo haría en CSS normal?

— Christoph

@ Christoph No lo sé, pruébalo y verás.

— robertc

@robertc Lo intenté y no funcionó, pero tenía un elemento de estilo duplicado. Al eliminarlo, funcionó bien;)

— Christoph

@robertc: Tengo una pregunta sobre tu respuesta. El patrón comienza en las coordenadas globales (0,0). ¿Es posible dejar que el patrón use el sistema de coordenadas local del objeto adjunto? Quiero dibujar un rect en diferentes lugares en mi svg y lo que sucede es que el patrón se repite en el fondo del agujero y los objetos se usan como máscaras.

— Tobias Golbs

@robertc, actualice su respuesta para mencionar que xlink:hrefestá en desuso desde SVG 2 y simplemente usar hrefahora. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia