SVGの<use>タグが機能しないのはなぜですか？

Question

私は以下の簡単な例を持っています。 HTMLファイルにこのコードを置くことは何もロードしない、しかし

<svg> 
 
     <defs> 
 
     <g id="shape"> 
 
      <circle cx="100" cy="100" r="100" /> 
 
     </g> 
 
     </defs> 
 
</svg>

：image.svgに格納されます。何故ですか？

<svg> 
     <use xlink:href="#shape" x="10" y="10" /> 
</svg> 

私が間違って何をしているのですか？私はそれを動作させるように見えることはできません。

Answer 1

あなたが使用したい形状とSVG内で使用タグを持っている必要があります：あなたは別のドキュメントから要素を使用している場合は、文書を指定する必要が

<svg> 
    <defs> 
     <g id="shape"> 
      <circle cx="100" cy="100" r="100" /> 
     </g> 
    </defs> 

    <use xlink:href="#shape" x="10" y="10" /> 
</svg> 

Answer 2

！

<use xlink:href="#shape" x="10" y="10" /> 

これは、「現在のドキュメントの#shape要素を使用する」という意味です。

別のドキュメントからインポートするには、あなたがxlink:href属性でSVGファイルへの参照を配置する必要があります：あなたは、パスをチェックする必要が明らかに

<use xlink:href="image.svg#shape" x="10" y="10" /> 

はここに正しいです。これは、Internet Explorerのどのバージョンでもサポートされていませんが、ポリフィルが利用可能であることに注意してください。

Answer 3

名前空間を必要とする外部のSVGファイルの場合

...と私はそれ以外の場合は透明になり、円を描画するために塗りつぶしを追加しました：

<svg xmlns="http://www.w3.org/2000/svg" > 
 
    <symbol id="shape" width="200" height="200" viewbox="0 0 200 200"> 
 
    <circle cx="100" cy="100" r="100" fill="currentColor" /> 
 
    </symbol> 
 
    <text y="20">Symbol above will not render unless referenced by use element</text> 
 
</svg>

次に、あなたはそれをあなたを参照するときXLINKの正しい名前空間を使用する必要があります。

svg.defs-only { 
 
    display:block; position: absolute; 
 
    height:0; width:0; margin: 0; padding: 0; 
 
    border: none; overflow: hidden; 
 
} 
 

 
svg { 
 
    color: orange; 
 
    stroke: red; 
 
} 
 

 
.purple { 
 
    color: purple; 
 
    stroke: black; 
 
}

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" > 
 
    <symbol id="shape" width="50" height="50" viewbox="0 0 50 50"> 
 
    <circle cx="25" cy="25" r="20" fill="currentColor" stroke="inherit" /> 
 
    </symbol> 
 
</svg> 
 

 
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <use xlink:href="#shape" x="10" y="10" /> 
 
    <use xlink:href="#shape" x="80" y="10" class="purple" /> 
 
</svg>

外部ファイルを参照している場合は、#の前にファイル名を入力する必要があります。 image.svg#shapeもちろん正しいパスを取得してください。

注意：すべてのブラウザがフラグメント識別子（IEとEdgeなど）をサポートしているわけではありません。これらのブラウザではsvg4everybodyのようなjavascript polyfillを使用する必要があります。

回避策 - のみ