是否可以将外部 SVG 填充加载到 inline-svg 元素中？答案

【问题标题】：Is it possible to load an external SVG fill into an inline-svg element?是否可以将外部 SVG 填充加载到 inline-svg 元素中？
【发布时间】：2013-03-13 23:30:47
【问题描述】：

我想创建一个带有 fill 属性的 inline-svg 文本元素，用于加载在外部 svg 文档中定义的渐变。

内嵌 SVG

<svg>
    <text fill="url(/path/to/svg.svg#gradient)">Mask this text</text>
</svg>

/path/to/svg.svg

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#ffeab4; stop-opacity:1" />
            <stop offset="30%" style="stop-color:#ed9f3b; stop-opacity:1" />
            <stop offset="40%" style="stop-color:#ed9f3b; stop-opacity:1" />
            <stop offset="70%" style="stop-color:#ffeab4; stop-opacity:1" />
            <stop offset="100%" style="stop-color:#ed9f3b; stop-opacity:1" />
        </linearGradient>
    </defs>
</svg>

这是jsfiddle test case，这是gist of the SVG gradient，我正在尝试加载。

问题

是否可以将外部 fill 加载到 inline-svg 元素中？
是我刚刚错误地定义了我的外部渐变还是错误地引用了它？

【问题讨论】：

gist.github.com/potench/5146989/raw/… content-disposition: 附件； filename=gradient.svg 我怀疑这很可能会干扰用作外部源的文件。
我还保存了外部文件在这里进行测试：potench.com/gradient.svg 将更新 jsfiddle。
这是用一个 mime 类型的 text/plain 提供的，所以除非你修复它，否则肯定不会工作。
嗯，无论如何它都可以在 Chrome 中运行...jsfiddle.net/jsRrE/3
那个小提琴没有使用 text/plain mime 类型文件。

标签： html svg

【解决方案1】：

SVG 规范允许使用外部填充和描边，但并非所有浏览器都实现了该部分。 Opera 和 Firefox 可以，但 Chrome 不可以。

一个活生生的例子here。

您描述的语法是正确的。例如 fill="url(example.svg#gradient)" 将获取外部 example.svg 并使用该文件中指定的渐变。

【讨论】：

哇这个sux，在chrome中还是这样吗？我正在尝试使用 fill: url(/assets/def.svg#grad) 对多个内联 SVG 产生相同的 > 渐变效果，有没有跨浏览器的方法可以做到这一点？