web-dev-qa-db-ja.com

SVGをSVGに埋め込みますか？

私はSVGドキュメントを持っていますが、その中に外部のsvg画像を含めたいと思います、すなわち次のようなものです：

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

（「オブジェクト」は単なる例です-外部ドキュメントはxhtmlではなくSVGになります）。

何か案は？これも可能ですか？それとも、単にlogo.svg xmlを外側のSVGドキュメントに入れるのが最善ですか？

xmlsvgembedding
77
Marcin

image 要素を使用して、SVGファイルを参照します。楽しみのために、以下をrecursion.svgとして保存します。

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
113
Phrogz

または、次のように実際に子svgを親svgに埋め込むことができます。

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

デモ：
http://hitokun-s.github.io/demo/path-between-two-svg.html

77
toshi

次のようにして、SVGを別のSVGに埋め込むとき、言及する価値があります。

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

次に、埋め込まれたSVGは、指定された寸法で長方形形状を取ります。

つまり、埋め込みSVGが円または正方形以外の形状である場合、透明な正方形になります。したがって、マウスイベントはその埋め込まれた正方形にトラップされ、親SVGに到達しません。気をつけて。

より良いアプローチは、パターンを使用することです。図形、円、正方形、さらにはパスを塗りつぶすために。

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

次に、次のようなパターンを使用します。

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

これで、マウスイベントが透明な画像の四角に固定されなくなりました！

29
oabarca

<image>タグは、埋め込みファイルの低品質のレンダリングを行いました。ただし、次の手法は機能しました（SVGファイル内にSVGファイルを埋め込む-必ずしもHTMLページにレンダリングする必要はありません）：

  • テキストエディターでSVGファイルを編集します。

  • メタデータの終わりを見つけます。

    </metadata>
  <g
   id="layer1"
   inkscape:groupmode="layer"
   inkscape:label="Layer 1">

  • そのグループタグの後に次の行を挿入します。

    <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />

  • この場合、OTHERFILE.svgをファイルに含め、すべてのlayer1（最初のデフォルトレイヤー）を含めます。

  • これを保存してから、Inkscapeでファイルを開きます。

この手法は、すべてのページに標準の背景またはロゴを付けるのに役立ちます。ファイルの最初に配置することにより、最初に（したがって下部に）レンダリングされます。この属性を追加してロックすることもできます。

sodipodi:insensitive="true"

言い換えると：

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
3
Nick Gammon

SVGにSVGを埋め込む必要がありましたが、色を変更して変換を適用する必要もありました。

Firefoxのみが、ネストされたsvg要素の「transform」属性をサポートします。 <image>の色を変更することもできません。したがって、両方の組み合わせが必要でした。

私がやったことは次のことでした

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

これは、少なくともFirefox、ChromeおよびInkscapeで動作します。

これは、変換を適用できるようになったことを除いて、親svg回答の子svgと同じように動作します。

1
Christiaan