如何在剪辑SVG内添加图像而不是纯色。

9 浏览
0 Comments

如何在剪辑SVG内添加图像而不是纯色。

能否为SVG的元素设置background-image背景图像?\n例如,如果我设置元素的class为\"wall\",CSS样式.wall {fill: red;}有效,但.wall{background-image: url(wall.jpg)}和.wall {background-color: red;}都无效。

0
0 Comments

如何在剪辑SVG中添加图像而不是纯色

问题的原因:用户想要在剪辑SVG中添加图像而不是纯色背景。

解决方法:可以通过将背景制作成图案来实现。首先,在标签内创建一个图案,设置其id、patternUnits、width和height属性。然后,在图案内部使用标签,设置其href、x、y、width和height属性,指定所需的图像。最后,在需要应用图案的路径中,使用fill属性将其设置为url(#img1)。

解决方法的代码示例:


  
    
  


其他用户的问题和讨论:

- 是否可以使用base64编码的图像替代wall.jpg?

- 对此进行了尝试,但没有成功,可能是由于重复的样式元素。删除重复的样式元素后,问题得到解决。

- 图案是否可以使用附加对象的本地坐标系,而不是全局坐标系?

- 建议提出自己的问题来解决该问题。

- 该解决方法对于使用d3.js或类似库的用户非常有帮助。

- 遗憾的是,TCPDF不支持SVG图案,其他一些不完全支持SVG2的程序也可能不支持。

- 更新解决方法,提到xlink:href属性在SVG 2中已被弃用,现在应使用href属性。

本文介绍了如何在剪辑SVG中添加图像而不是纯色背景的解决方法。通过将图案制作成pattern,并在所需的路径中引用该pattern,可以实现在SVG中添加图像的效果。同时,还提到了一些其他用户的问题和讨论。

0