← Vídeo anterior Vídeo siguiente →
Probablemente no haya un caso de uso tremendamente grande para esto, aparte de lo obvio: necesita un gráfico de trama, entre otras cosas, en un diseño SVG más grande. De esa forma se mueve y escala con el resto de elementos.
La sintaxis es:
<svg ... >
<image xlink:href="https://css-tricks.com/path/to/image.jpg" width="100%" height="100%" x="0" y="0" />
</svg>
Probablemente nunca coloque un gráfico de trama en un SVG por sí solo, ya que no tiene ninguna ventaja. Sí, entonces puede aplicar filtros SVG a la imagen, pero puede aplicar filtros SVG a una <img>
también. Lo mismo ocurre con los trazados de recorte y las máscaras.
Sin embargo, los filtros pueden parecer ligeramente diferentes, por lo que es bueno tenerlo en cuenta:
Vea los filtros Pen SVG en SVG o IMG de Chris Coyier (@chriscoyier) en CodePen.