是否可以使用 javascript 和/或 css 修改背景 svg 图像？

Posted 2023-03-06

【中文标题】是否可以使用 javascript 和/或 css 修改背景 svg 图像？

【英文标题】：Is it possible to modify background svg images with javascript and or css?

【发布时间】：2015-02-02 23:56:27

【问题描述】：

就我而言，我有一个设置为重复 x 的背景图像。我想知道背景图像是否可以是 svg，如果可以，有没有办法通过 css 或 javascript 控制它的节点？

我一直在使用 SVGInjection 对插入标签的 svg 图像进行动画处理，但是当 svg 是背景图像时，我无法找到一种方法来做同样的事情。

【参考方案1】：

您当然可以将其作为背景图像嵌入，只要 SVG 保存在文件系统中的单独文件中 (edit: 或其他人指出出，作为数据 url 的一些变体） 并以与任何其他图像格式相同的方式引用。但SVG 并不是真正的图像格式，它更像是XML/script 混合格式。

所以——不，不可能控制它的节点，这是一件非常好的事情。

基本上，您不能修改任何未嵌入页面的SVG（除非它嵌入在另一个页面中，如果它是同一个域，然后又嵌入到您的页面中），如果您可以您将打开任何允许该文件类型存在大规模 XSS 安全漏洞的域，因为 SVG 规范允许嵌入 script 标签。

img image background-image content（用于伪）

【讨论】：

那么有没有办法将它嵌入到背景图像中？

@gdaniel – 当然，就像任何其他图像一样。 html 元素中的 style="background-image: url(path/to/file.svg); 或 CSS 中的 #my-element background-image: url(path/to/file.svg);。

看来毕竟有办法 -> svgeneration.com/generate/Steel 他们使用 javascript + css + base64 转换器即时更改 svg 样式。

@gdaniel – 哈哈，不完全一样。这不会渲染一个可以操作其节点的SVG，而您要做的就是将一个全新的SVG 文件循环到另一个文件。我怀疑，对于任何不是很简单的事情，性能都会非常缓慢，因为这本质上是为SVG 文件动态构建动画.gif。在我看来，这是个坏主意。

好点。这不完全一样，但总比没有好。唯一可能很慢的部分是每次进行更改时将代码转换为 base64。

【参考方案2】：

我的理解是……如果背景图像是从文件中加载的，而不是嵌入到页面中，那么它们可以是 SVG。

要通过 JS 或 CSS 更改背景，您必须访问嵌入式版本。

有一种方法可以做到这一点......

body  background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      

...基本上，URL 是嵌入了 SVG 的字符串。您需要创建一个函数来重建并在每次重建时进行更改。

【讨论】：

我不确定您是否知道，但您实际上可以将 SVG 嵌入到您的样式标签或 css 文件中！ Check this out 解释一下。

我知道这一点（忘记了，但知道），但是重新加载会变得非常尴尬，因为 URL 本质上是一个字符串......每次都必须重新构建。所以我想我错了，只要每次更改 SVG 时都重新创建它，它就可以完成，但我不确定我是否想走这条路。

是的，我也不会使用它，通常情况下，但我最近不得不进行一次优化演出。客户提供了 SVG，没有地方上传，所以他们进入了 CSS。