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

Question

我想创建一个带有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元素中？
• 我是否刚刚错误地定义了外部渐变或者错误地引用了它？

Answer 1

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

实例here。

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