複数の<svg>要素にまたがって<defs>の内容を参照できますか？

<svg>に含まれるdefの内容を別の<svg>から参照できますか？複数の<svg>要素にまたがって<defs>の内容を参照できますか？

2016-10-24 trusktr

目的は何ですか。とにかくdefで宣言された要素にIDを追加する必要があります。そうすれば、これらの要素をドキュメント全体で参照できます（idが一意でなければなりません）。 – Kaiido

どういう意味ですか？あなたは

@RobertLongsonええ、それは私が求めていることです。 – trusktr

例：

#fire1 { 
 
    fill: red; 
 
} 
 

 
#fire2 { 
 
    fill: green; 
 
} 
 

 
#fire3 { 
 
    fill: blue; 
 
}

<!-- Let's make it a resource :) --> 
 
<svg width="0" height="0" viewBox="0 0 0 0"> 
 
    <title>Re-Use SVG Defs as Resource</title> 
 
<defs> 
 
    <g id="fire" transform="translate(0,10)"> 
 
    <path d="M101.138,160.949 C94.916,154.464 53.538,110.17 95.277,71.802 C130.054,39.868 135.137,13.003 123.434,-0 C123.434,-0 211.959,33.692 159.877,111.877 C150.998,125.163 128.702,140.843 140.369,173.129 L101.138,160.949 z" /> 
 
    <path d="M155.503,171.572 C153.624,165.019 145.142,150.746 171.021,122.303 C184.873,107.172 190.104,84.742 191.308,76.301 C191.308,76.301 237.167,100.662 191.576,160.215 L155.503,171.572 z" /> 
 
    </g> 
 
</defs> 
 
</svg> 
 

 

 
<svg id="fire1" width="100" height="100" viewBox="0 0 300 300"> 
 
    <use xlink:href="#fire"/> 
 
</svg> 
 

 
<svg id="fire2" width="100" height="100" viewBox="0 0 300 300"> 
 
    <use xlink:href="#fire"/> 
 
</svg> 
 

 
<svg id="fire3" width="100" height="100" viewBox="0 0 300 300"> 
 
    <use xlink:href="#fire"/> 
 
</svg>

CodePen

の場合あなただけに埋め込みしようとしているあなたはまた、imageのような別のsvgの中にプループすることができます別の（それはdefsを含むだろう）にe svg;

<svg id="fire1" width="100" height="100" viewBox="0 0 300 300"> 
    <use xlink:href="#fire"/> 
    <image width="100" height="100" xlink:href="SomeOtherSVGImage.svg" /> 
</svg>

出典

2016-10-24 04:25:14

したがって、 ''自体ではなく、 ''要素に含まれる要素を参照しています。 – Kaiido

私は誤読しました。**グループ** ** ** defs *、**グループ**または** defs *。また、defはDOM操作に便利なIDを持つことができますが、コンテンツが表示されないため、 ''要素からターゲットを指定するのは意味がありません。私が他の答えへのコメントで述べたように、どこで役に立つかは、

複数の<svg>要素にまたがって<defs>の内容を参照できますか？

答えて