Rellenar elemento de ruta SVG con una imagen de fondo

126

¿Es posible establecer un background-image para un elemento SVG <path>?Rellenar elemento de ruta SVG con una imagen de fondo

Por ejemplo, si fijo el elemento class="wall", el estilo CSS .wall {fill: red;} obras, sino .wall{background-image: url(wall.jpg)} no lo hace, ni .wall {background-color: red;}.

Fuente

2010-09-25 jbochi

Mostrando cómo establecer la imagen de fondo para el texto SVG, opcionalmente por carácter: http://stackoverflow.com/a/10853878/405017 – Phrogz

para aquellos que buscan más información profunda ver este artículo [enlace ] (http://vanseodesign.com/web-design/svg-pattern-attributes/) –

200

Puede hacerlo haciendo que 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 la altura de acuerdo a su imagen, a continuación, hacer referencia a ella desde el camino 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)" />

Working example

Fuente

2010-09-26 16:45:44 robertc

muy bonito, ¿funciona esto también con las imágenes base64? en lugar de wall.jpg algo así como 'data: image/png; base64, iVBORw0KGgoAA' como lo haría en CSS normal? – Christoph

@Christoph No lo sé, pruébalo y mira. – robertc

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

La respuesta de "robertc" es svg, y esto es similar a lo que utiliza el código de ruta d3.js. Logré crear definiciones dinámicas para las rutas d3.js aplicando lo siguiente.

me las arreglé para conseguir que funcione al definirlo 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);

Fuente

2013-12-11 13:00:41

es esto d3.js? si es así, debe mencionarlo porque no está en las etiquetas de pregunta – BiAiB

¿No escribí la pregunta? Hice una búsqueda para el código - encontré esta página. Encajaba bien y eso pareció funcionar para mí. –

Sé que no escribiste la pregunta. El cuestionario pregunta por las soluciones svg y estás descargando código JavaScript. Ni siquiera es javascript puro, así que usaste algún tipo de biblioteca. Sospecho que es d3.Pero cuando un usuario aleatorio entra en su respuesta, no es útil porque no tiene idea de cómo usarlo. Voy a votar esto hasta que elabores. – BiAiB

-4

Si su SVG es solo color, la mejor manera es la conversión de archivos de fuentes a IVS.

Puede usar la herramienta icomoon.io para convertir todos sus archivos SVG en archivos de fuentes y usarlos como clases de iconos de fuentes, como Fontawesome.

Fuente

2017-03-18 13:46:10

Esto no parece responder a la pregunta original en absoluto. –

Rellenar elemento de ruta SVG con una imagen de fondo

Respuesta

Cuestiones relacionadas