0

私は次のようなことをしようとしています:

<svg>
    <defs>
        <svg id="importeddoc">...</svg>
    </defs>
    <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"></use>
</svg>

元の SVG ドキュメントの一部が 100x100 のボックスに表示されると思います。しかし、代わりに何も起こりません。SVG仕様から、これはうまくいくように見えます。ポインタはありますか？

私のイメージを構築するのは d3.js ライブラリであり、何らかの理由で名前空間を切り取っています。私は.attr("xlink:xlink:href", "...")それを機能させるためにやらなければなりませんでした。ありがとう！

4

1 に答える 1

1

すべての名前空間宣言をsvg要素に追加すると、埋め込まれた SVG を参照できるはずです。次の例では、以下に示す出力が生成されます。これは、私がテストしたすべてのブラウザーで機能し、Batik Squiggle でも機能します。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="5cm" height="5cm" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">      
  <defs>
    <svg id="importeddoc">
      <rect width="2cm" height="1cm"/>
      <circle cx="1cm" cy="5mm" r="3mm" fill="red"/>
    </svg>
  </defs>
  <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"/>
  <use x="0" y="60" width="40" height="20" transform="scale(1.5, 1)" xlink:href="#importeddoc"/>
</svg>

ここに画像の説明を入力

うまくいかない場合、どの SVG ビューアを使用していますか?

于 2012-05-03T13:19:11.993 に答える