6

我有一个 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>元素 ( ) 工作得非常好，但作为 an或 css<object type="image/svg+xml" data="img/svg/cross.svg#ff0000"></object>失败。imgbackground-image

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

4

2 回答 2

8

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

Firefox 中有一个解决方法：如果您有内联SVG 代码（可以隐藏），您可以使用filterCSS 属性从该 SVG 代码中使用过滤器。根据您要达到的目的，这可能是一个相当强大的工具。根据 MDN，Chrome 和 Safari 也应该支持这一点，但我不确定他们是否支持。

于 2013-05-30T14:01:57.243 回答
5

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

于 2013-05-31T13:26:12.790 回答