html - insertar - Rellene el elemento de ruta SVG con una imagen de fondo
insertar svg en html (2)
La respuesta de "robertc" es svg, y esto es similar a lo que usa el código de ruta d3.js. Logré crear definiciones dinámicas para las rutas d3.js aplicando lo siguiente.
Logré hacerlo funcionar definiéndolo como el siguiente
chart.append("defs")
.append(''pattern'')
.attr(''id'', ''locked2'')
.attr(''patternUnits'', ''userSpaceOnUse'')
.attr(''width'', 4)
.attr(''height'', 4)
.append("image")
.attr("xlink:href", "locked.png")
.attr(''width'', 4)
.attr(''height'', 4);
¿Es posible establecer una background-image de background-image para un elemento SVG <path> ?
Por ejemplo, si configuro el elemento class="wall" , el estilo CSS .wall {fill: red;} funciona, pero .wall{background-image: url(wall.jpg)} no lo hace, ni .wall {background-color: red;}
Puedes hacerlo convirtiendo el fondo en un pattern :
<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 el alto de acuerdo con su imagen, luego hágalo desde la ruta de la siguiente 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)" />
