用背景图像填充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;} 。

Answer 1

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

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

工作示例

Answer 2

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

Answer 3

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

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