SVGでローカルの `defs`を`使用する '

複数のSVGピクチャが1つのHTMLページに埋め込まれています。すべてのSVGには、use要素で参照している自分のdefsセクションがあります。 defsと同じIDを持つ要素を定義して参照することはできないようです。第2のSVG useは、最初のSVG defsセクションの定義フォームを選択し、ローカル再定義を無視します。SVGでローカルの `defs`を`使用する '

LOCAL defsセクションへの参照方法は誰にも分かりますか？

ChromeとFirefoxで同じ話です。

以下の例を参照してください：複数の同一のIDを持つSVGファイルがhttp://www.w3.org/TR/SVG/struct.html#IDAttribute

あなたの選択肢ごとに無効である

<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>

出典

2013-04-20 drom

をすべてのIDを一意にするか、SVGを移動しているのいずれか別のファイルにまとめて、<object>またはタグで参照してください。

出典

2013-04-20 21:51:54

私は外部SVGファイルを使用できません。なぜなら、私は、javaScriptを使用してページ内にSVGを生成するからです。 [my code]（http://wavedrom.googlecode.com/svn/trunk/tutorial.html）。すべてのIDを一意にすることは困難です。だから、私は ' drom

その場合、グローバルに一意のIDを生成する必要があります。 –

+10

この問題は、SVGファイル内に複数の同一のIDではなく、HTMLファイル内の複数のインラインSVG（defsセクションで同じIDを使用する）です。 SVGがインラインである場合にのみ、IDが外部にある場合、IDは衝突しません。驚いたことに、私はIDがSVG内部でユニークであることを期待しています。しかし、HTMLでインライン展開されたときに、すべてが同じDOMの一部になるので、なんらかの意味があります。しかし、迷惑な。 – rlovtang

定義IDをランダム化するツールを作成して、同じ#idを参照するインラインsvgでこの問題を回避しました。うまくいけば、他の人にとっては便利です。 http://hugozap.com/randomize_svg_def_ids.html

出典

2018-03-08 03:35:16

SVGでローカルの `defs`を`使用する '

答えて

関連する問題