在背景图像svg中使用JavaScript

我有一个SVG（十字），它使用JavaScript根据给定给SVG url的哈希值更改行的颜色

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1" />
    <line x1="100%" y1="0" x2="0" y2="100%" stroke="black" stroke-width="1" />

    <script>
        if (window.location.hash) {
            document.getElementsByTagName('line')[0].setAttribute('stroke', location.hash);
            document.getElementsByTagName('line')[1].setAttribute('stroke', location.hash);
        }
    </script>
</svg>

if（window.location.hash）{
document.getElementsByTagName（'line'）[0].setAttribute（'stroke'，location.hash）；
document.getElementsByTagName（'line'）[1].setAttribute（'stroke'，location.hash）；
}

作为

元素（

），它工作得非常好，但作为

img

或css

背景图像（
）失败

如何将其作为CSS
背景图像使用？
SVG中用作HTML图像的动态行为是。原因很明显-您可以使用来自不同域的SVG图像，并且不希望它在文档上下文中运行JavaScript代码。因此，用作HTML图像的SVG本质上始终是静态的。这里有更多关于（感谢@的链接）的详细信息

Firefox中有一个解决方法：如果您有内联SVG代码（可以隐藏），那么您可以使用。这取决于你试图实现的目标，这可能是一个相当复杂的过程。根据MDN，Chrome和Safari也应该支持这一点，但我不确定它们是否支持。
我自己找到了一个适合我的解决方案。
我也在使用Sass，通过它我找到了一个base64编码插件。
有了它，我可以在CSS中编写svg，然后将其编码为base64。我也可以使用变量。
SASS代码现在如下所示：

background: url('data:image/svg+xml;base64,'
                + base64Encode('<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#{$color-line}" stroke-width="1" /><line x1="100%" y1="0" x2="0" y2="100%" stroke="#{$color-line}" stroke-width="1" /></svg>'));

background:url（'data:image/svg+xml；base64，'
+base64Encode（“”）；

base64插件位于以下位置：
你不能，SVG用作背景图像，这是非动态的，根据规范-它只是一个静态图像。@WladimirPalant-有趣…哪个规范？我本以为它会说些什么，但我看不到。@Quentin:在规范中找不到它，所以它似乎只是一个逻辑安全限制-请看我的答案。SVG 1.1规范的一位作者创建了这个。。。糟糕的是，内联svg不是一个选项。Chrome和Safari也支持它，但我确实需要一个背景，因为我无法控制HTML。但我找到了一个解决方案（请参阅我的答案），您可以将数据URI与文本一起使用。您不需要使用base64编码（仅使用utf编码）（base64编码）：
background:url（'data:image/svg+xml；utf8'）我猜，问题是“当svg用作背景时如何运行js”，而不是您提供的东西here@Velaro你注意到问题的作者与公认答案的作者是同一个人吗？我猜他最清楚，那是7年前的事了！我注意到了，作者提出了一个问题，答案和这个问题无关。不管它有多老，关键是有人可能会面临和我现在一样的问题。（如果我对-base64编码，我可以使用javascript吗？我猜-不！）