SVGの使用とグラデーションを塗りつぶし

私はSVGアイコンをファイルに外部化し、<svg><use xlink:href="file.svg#icon" /></svg>のようなマークアップで参照しようとしました。理論的にはこれはうまく機能しますが、ブラウザによってはレンダリングに問題があります。ファイル内の<use>というシンボルを参照し、svgファイルのURLを直接開くと、すべてのブラウザがsvgを正しくレンダリングできます。SVGの使用とグラデーションを塗りつぶし

簡潔に言えば、マークアップで<svg><use/></svg>というシンボルを参照するときに、SVG linearGradientが要素の塗りつぶしとして機能するようにクロスブラウザの方法がありますか？

私は問題を実証plunkerを設定します。簡体http://plnkr.co/edit/feKvZ7?p=preview

、マークアップは次のようなものです：

<!DOCTYPE html> 
<html> 
    <body> 
    <h1>SVG sprite test</h1> 
    <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <use xlink:href="icon.svg#icon" /> 
    </svg> 
    </body> 
</html>

そしてSVGファイルは、次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <linearGradient id="gradient"> 
     <stop offset="0" stop-color="black" /> 
     <stop offset="1" stop-color="white" /> 
    </linearGradient> 
    </defs> 
    <symbol id="icon" viewBox="0 0 100 100"> 
    <circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" /> 
    </symbol> 

    <use id="iconuse" xlink:href="#icon" width="100" height="100" /> 

</svg>

これはさまざまなブラウザでの表示です：

出典

2017-05-29 RJo

は（それはInkscapeのは、勾配の実装を提供する方法を説明します）、次のいずれかを試してみてください：

<linearGradient id="gradient"> 
    <stop 
    style="stop-color:black;" 
    offset="0"/> 
    <stop 
    style="stop-color:white;" 
    offset="1" /> 
</linearGradient> 
... 
<path 
    style="fill:url(#gradient); ...

出典

2017-05-29 06:30:45 FieryCat

がstyle'属性 'にあるようにプロパティを変更する' ' – RJo

問題を解決しませんでしたそれはおそらくレンダリングには役立ちますが、私は多才なものを失います。このようにしたくないでしょう。 – FieryCat

をのimgインラインSVGを変更しようと – RJo

SVGの使用とグラデーションを塗りつぶし

答えて

関連する問題