svg 使用来自另一个文件的过滤器答案

【问题标题】：svg use filter from another filesvg 使用来自另一个文件的过滤器
【发布时间】：2014-03-10 19:50:27
【问题描述】：

我正在尝试定义几个过滤器，但不希望它们弄乱主 HTML 文档。我想使用相对 URI 来引用那些使用相对 IRI 的过滤器，which the docs indicate should work。

filters.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
    </defs>
</svg>

page.html

<!DOCTYPE html>
<html>
<head>
    <meta chartype="utf-8" />
    <title>Remote Filter Loading</title>
</head>
<body>
    <svg
        id="blurs"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
    >
        <defs>
            <use xlink:href="filters.svg#blur"></use>
        </defs>

        <circle cx="50" cy="50" fill="red" r="25"
            filter="url(filters.svg#blur)"
        />

        <circle cx="100" cy="50" fill="red" r="25"
            filter="url(#blur)"
        />
    </svg>
</body>
</html>

在 Chrome 中使用python -m SimpleHTTPServer 提供这些，我希望看到两个模糊的小点：

http://imgur.com/G8AN9bx,aDlhF4g#1

（通过将过滤器直接粘贴到defs中生成，我认为<use>做到了。）

我得到了什么：

http://imgur.com/G8AN9bx,aDlhF4g#0

稍后

正如@Jason Aller 所指出的，Chrome 不支持此功能。正如我提到的，我的过滤器似乎不适用于 Firefox。是否有任何可能的解决方法将（实际图像有多个，而且它们相当复杂）保存在单独的文件中？

【问题讨论】：

#glow 应该是#blur 吗？
是的 - 最初的尝试是星光滤镜，这里简化了一个简单的模糊。错误仍然存在。
嗨@DavidSouther，我正在尝试处理同样的问题。你有没有找到一个好的跨浏览器解决方案？

标签： xml svg xlink

【解决方案1】：

查看caniuse.com 并进行测试后，我可以看到它在 Firefox 中有效，但在 Chrome 中无效。

【讨论】：

很好的电话，谢谢。太糟糕了，我正在运行的复杂过滤器无法在 Firefox 中正确呈现。