用背景图像填充SVGpath元素

是否可以为SVG <path>元素设置background-image

例如,如果我设置元素class="wall" ,则CSS样式.wall {fill: red;}工作,但是.wall{background-image: url(wall.jpg)}不会,也不会.wall{background-image: url(wall.jpg)} .wall {background-color: red;}

你可以通过把背景变成一个模式来做到这一点:

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

根据图像调整宽度和高度,然后从path中引用它:

 <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)" /> 

工作示例

“robertc”的答案是svg – 这与d3.jspath代码所使用的类似。 我设法创buildd3.jspath的dynamicdef的应用以下。

我设法通过将其定义为以下来实现它的工作

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

如果您的svg是单色,最好的方法是将SVG转换为字体文件。

您可以使用icomoon.io工具将所有SVG连接到字体文件,并将其用作字体图标类,如Fontawesome 。