HTML5 - svg rect Background

14 浏览
0 Comments

HTML5 - svg rect Background

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

0

1 答案

0 Comments

HTML5 - svg rect Background问题的出现原因是希望在SVG矩形中设置背景，但是没有直接的方法来实现。解决方法是通过将背景制作成一个pattern，并在路径中引用该pattern。具体的代码如下：

上述代码中，首先在``标签中定义了一个名为`img1`的pattern，其中包含一个图片元素用于作为背景。然后，在路径中使用`fill`属性来引用该pattern，实现了路径的背景填充。

这种方法对于使用base64格式的图片也适用。只需要将`href`属性的值改为base64编码的图片数据即可。

需要注意的是，`xlink:href`属性在SVG 2中被废弃，现在应该使用`href`属性。更多信息可以参考[developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href)。

此方法非常实用，特别适用于使用d3.js或其他类似库的项目。

0