2

我想创建一个 inline-svg 文本元素，其fill属性加载在外部 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 测试用例，这是我尝试加载的 SVG 渐变的要点。

问题

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

1 回答 1

4

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

一个活生生的例子。

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

于 2013-03-13T15:30:47.177 回答