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

Question

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

内联SVG

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

/路径/到/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 .

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