2

fill外部の svg ドキュメントで定義されたグラデーションを読み込む属性を持つ inline-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 に答える