css - imagen - insertar svg en html

¿Es posible utilizar una imagen de fondo en el trazo de un elemento SVG?

Question

Al igual que la pregunta: estoy tratando de determinar si es posible utilizar algún tipo de patrón o imagen de fondo repetida para el trazo de una ruta SVG.

¿Es esto factible? ¿O estás limitado a los colores solamente?

TIA!

Answer 1

Puede usar la propiedad stroke-dasharray para "patrones" en el trazo:

<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />

Con esto puedes especificar la duración de los trazos y espacios entre ellos. Para algunos ejemplos, echa un vistazo a la página de ejemplo de MDN .

Answer 2

Puede usar un <pattern> como un golpe, por ejemplo

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
      <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
    </pattern>
  </defs>
  <rect stroke-width="32" stroke="url(#p1)" width="200" height="200"/>
</svg>

El patrón puede contener elementos de dibujo <svg> o (como aquí) una imagen, o ambos.