用背景图像填充SVG路径元素

Question

用背景图像填充SVG路径元素

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

例如，如果我设置元素class="wall"，CSS样式.wall {fill: red;}很管用，但是.wall{background-image: url(wall.jpg)}不，也不是.wall {background-color: red;}

Answer 1

您可以通过将背景设置为花纹:<defs> &nbsp;&nbsp;<pattern&nbsp;id="img1"&nbsp;patternUnits="userSpaceOnUse"&nbsp;width="100"&nbsp;height="100"> &nbsp;&nbsp;&nbsp;&nbsp;<image&nbsp;xlink:href="wall.jpg"&nbsp;x="0"&nbsp;y="0"&nbsp;width="100"&nbsp;height="100"&nbsp;/> &nbsp;&nbsp;</pattern></defs>根据您的图像调整宽度和高度，然后从路径中引用它，如下所示：<path&nbsp;d="M5,50 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;l0,100&nbsp;l100,0&nbsp;l0,-100&nbsp;l-100,0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M215,100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a50,50&nbsp;0&nbsp;1&nbsp;1&nbsp;-100,0&nbsp;50,50&nbsp;0&nbsp;1&nbsp;1&nbsp;100,0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M265,50 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;l50,100&nbsp;l-100,0&nbsp;l50,-100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z" &nbsp;&nbsp;fill="url(#img1)"&nbsp;/>工作实例

Answer 2

“robertc”的答案是SVG，这与D3.js路径代码使用的类似。通过应用以下内容，我成功地为D3.js路径创建了动态def。我将它定义为：chart.append("defs") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append('pattern') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('id',&nbsp;'locked2') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('patternUnits',&nbsp;'userSpaceOnUse') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('width',&nbsp;4) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('height',&nbsp;4) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append("image") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr("xlink:href",&nbsp;"locked.png") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('width',&nbsp;4) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr('height',&nbsp;4);