Intégrer SVG dans SVG?

Question

J'ai un document SVG et j'aimerais y inclure une image externe svg, c'est-à-dire quelque chose comme:

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

("objet" est juste un exemple - le document externe sera SVG plutôt que xhtml).

Des idées? Est-ce seulement possible? Ou bien est-ce la meilleure chose pour moi de simplement insérer le fichier xx logo.svg dans mon document SVG externe?

Answer 1

Utilisez l’élément image et référencez votre fichier SVG. Pour vous amuser, enregistrez les éléments suivants sous forme de 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>
 

Answer 2

Il est important de mentionner que lorsque vous incorporez svgs dans un autre format svg avec:

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

puis le embeded svg devient un square avec de 10 et de hauteur 20.

C'est-à-dire, si votre embeded svg est un cercle ou une forme autre qu'un carré, alors il devient un carré avec de la transparence. Par conséquent, les événements de la souris se retrouvent piégés dans cette embeded place et ne pas atteindre le parent svg. Attention pour que.

Une meilleure approche est d'utiliser un modèle. Pour remplir une forme, un cercle, un carré ou même un chemin.

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

Puis utilisez le modèle comme ceci:

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

Maintenant votre souris événements à ne pas rester coincé dans transparentes de l'image de carrés!