0
私は、いくつかの画像をシンボルとして含むWebページにインラインで埋め込まれたSVGスプライトを持っており、これらの画像の一部にはSVGの<defs>セクションで定義されたグラデーションの塗りつぶしがあります。しかし、<use>タグを使用してページ上の画像を使用しようとすると、画像は表示されますが、グラデーションはありません。例えばWebページのインラインSVGで勾配が働かない
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="foo" />
</defs>
<symbol id="bar">
<path fill="url(#foo)">
<symbol>
</svg>
<!-- This displays the image contained in the symbol #bar but doesn't show the gradient defined in #foo -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#bar" />
</svg>
</body>
</html>
私はDEFSセクションがシンボルの外を定義して、これは勾配を含めるための正しい方法であると考えています。しかし、クローム、ファイアフォックス、IE11/Edgeでは動作しません（IE/Edgeでは実際には画像も正しく表示されませんが、IEではこれを責めたいと思っています）。現代のブラウザでは、それは私の間違いだと思っています。
これは、もちろん、非常に単純化した例であり、SVGスプライトが単調なSVG-ストアで生成された複数の画像の複合体であるが、私はそうのようにページ上に表示しようとした場合、個々の画像が表示罰金を行います。
<img src="bar.svg" />
SVG自体が正しいと思われます。私はまたスプライトの1つのイメージをページ上に置いてみました（わずかに変更されているので上のようなシンボルです）。<use>でそれを参照し、OKを表示します。私はスプライト内の個々の画像とそのシンボルのXMLを比較しようとしましたが、それらが（画像に関連する<defs>セクションの部分を含む）同一であることがわかっている限り、試しました。
グラデーションには停止がありません。 –
@RobertLongsonこれはグラジエントがどこにあるのかを示す非常に小さなサンプルです – Anduril
それはあなたのバグがどこではないのかを他の人が判断するのを難しくしていますか？ –