36

単一の HTML ページに複数の SVG 画像が埋め込まれています。すべての SVGには、要素defsで参照している独自のセクションがあります。use複数の内部で同じ id を持つ要素を定義してdefs参照することはできないようです。2 番目の SVGuseは、最初の SVGdefsセクションから定義を選択し、ローカルの再定義を無視します。

LOCALdefsセクションを参照する方法を知っている人はいますか?

Chrome と Firefox の同じ話。

  1. 以下の例を参照してください。

    <html><head></head><body>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="40" width="40" style="fill:#00F;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
<svg height="50" width="50">
 <defs>
  <rect id="mybox" height="20" width="20" style="fill:#F00;"></rect>
 </defs> 
 <use xlink:href="#mybox"/>
</svg>
</body></html>
4

3 に答える 3