用图像填充SVG多边形

11 浏览
0 Comments

用图像填充SVG多边形

可以为SVG的元素设置background-image吗？\n例如，如果我设置元素class=\"wall\"，CSS样式.wall {fill: red;}可以工作，但.wall{background-image: url(wall.jpg)}和.wall {background-color: red;}都不行。

0

1 答案

0 Comments

填充SVG多边形的问题主要是要将图像作为背景进行填充。解决方法是通过将背景制作成一个图案（pattern），然后将图案引用到路径中。具体方法如下：

首先，在``标签中定义一个图案：

其中，`img1`是图案的ID，`patternUnits`指定了图案的单位是用户空间（userSpaceOnUse），`width`和`height`根据图像的尺寸进行调整，`image`标签中的`href`属性指定了图像的路径和尺寸。

然后，在路径的`fill`属性中引用该图案：

fill="url(#img1)" />

其中，`fill`属性的值为`url(#img1)`，表示使用ID为`img1`的图案进行填充。

以上是通过制作图案并引用的方法来实现SVG多边形填充图像的效果。这种方法在使用d3.js等类似库时非常有用。然而，需要注意的是，某些程序（如TCPDF）可能不支持SVG图案，因此在使用时需要注意兼容性。

此外，需要注意的是，原始回答中提到的`xlink:href`属性已经在SVG 2中被弃用，应该使用`href`属性代替。详情可参考[MDN文档](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)。

通过制作图案并引用的方法可以实现SVG多边形填充图像的效果，这对于使用d3.js等库的开发非常有帮助。

0