在背景图像 svg 中使用 JavaScript答案

【问题标题】：Using JavaScript in a background-image svg在背景图像 svg 中使用 JavaScript
【发布时间】：2013-05-30 13:45:31
【问题描述】：

我有一个 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>

这作为 <object> 元素 (<object type="image/svg+xml" data="img/svg/cross.svg#ff0000"></object>) 非常有效，但作为 img 或 css background-image 失败。

我怎样才能使它作为 CSS background-image 工作？

【问题讨论】：

你不能，SVG 用作背景图像，因此根据规范是非动态的 - 它只是一个静态图像。
@WladimirPalant — 有趣……哪个规范？我原以为它会说什么 here 但我看不到它。
@Quentin：在规范中找不到它，所以它似乎只是一个合乎逻辑的安全限制 - 请参阅我的答案。
SVG 1.1 规范的作者之一创建了这个...schepers.cc/svg/blendups/embedding.html

标签： javascript css svg

【解决方案1】：

SVG 中用作 HTML 图像的动态行为是 disabled for security reasons。原因很明显——您可以使用来自不同域的 SVG 图像，并且不希望它在您的文档上下文中运行 JavaScript 代码。所以用作 HTML 图像的 SVG 本质上总是静态的。 http://www.schepers.cc/svg/blendups/embedding.html 有更多详细信息（感谢 @RobertLongson 提供此链接）。

在 Firefox 中有一个解决方法：如果您有内联 SVG 代码（可以隐藏），您可以使用来自该 SVG 代码的过滤器，使用 filter CSS property。根据您要实现的目标，这可能是powerful tool。根据 MDN，Chrome 和 Safari 也应该支持这一点，但我不确定他们是否支持。

【讨论】：

太糟糕了 inline svg 不是一个选项。 Chrome 和 Safari 也支持它，但我真的需要背景，因为我无法控制 HTML。但我找到了解决方案（见我的回答）

【解决方案2】：

我自己找到了适合我的解决方案。我也在使用 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>'));

base64 插件可以在这里找到： URL- or Base64- encode strings in Compass/SASS

【讨论】：

您可以将数据 URI 与文本一起使用。你不需要用base64编码（只是utf编码）（base64编码use 33% more bytes）：background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#ff0000" stroke-width="1" /><line x1="100%" y1="0" x2="0" y2="100%" stroke="#ff0000" stroke-width="1" /></svg>');
我猜，问题是“当 svg 用作背景时如何运行 js”，而不是您在此处提供的内容
@Velaro 您是否注意到问题的作者与已接受答案的作者是同一个人？猜猜他最了解?
那是 7 年前的事了！
我注意到了，作者提供的问题，答案不相关。不管它有多老，关键是有人现在可能真的面临和我一样的问题。（如果我编码base64，我可以使用javascript吗？我猜-不！）