Est-il sûr d'envelopper tous les enfants immédiats d'un document svg dans <g> pour le zoom?

Question

Dans mon application, je charge différents fichiers SVG et j'ai besoin de les agrandir. Comme je le vois, j'ai besoin d'appliquer une matrice de transformation à un élément pour le faire zoomer, mais cela ne fonctionne pas sur l'élément SVG, donc je dois tout emballer dans un <g> et le transformer à la place.

Donc ma question est est-il sûr de le faire? Est-il permis pour des éléments comme <defs> ne pas être des enfants immédiats de <svg>? Est-ce que la transformation sur le <g> le plus à l'extérieur affectera les éléments à l'intérieur <defs> dans ce cas? Quels autres problèmes peuvent survenir si j'enveloppe tout dans un <g>?

Answer 1

Oui, vous pouvez utiliser <defs> partout où vous en avez besoin, bien qu'il soit conseillé de le conserver en tant qu'enfant direct de l'élément racine. Demandez-vous si vous avez vraiment besoin d'hériter du style dans le contenu <defs>. Habituellement, est référencé par d'autres éléments, par exemple <use>, donc la plupart du temps il ne compte pas vraiment où est placé le <defs> le contenu à l'intérieur <defs>.

La transformation sur l'élément <g> n'affectera pas directement un enfant <defs> car la transformation n'est pas héritée. Cependant, il peut affecter les valeurs de retour de certains SVG DOM appelle, mais en général si vous demandez pour plus de détails sur les éléments à l'intérieur d'un <defs> vous devez être prudent quand même depuis plus de contexte est généralement nécessaire pour calculer correctement le résultat, par exemple, les pourcentages et objectBoundingBox Les unités dépendent respectivement de la fenêtre et de l'élément de référence.

Vous pouvez rencontrer des problèmes si le fragment SVG inclus a stylerules css qui sélectionnent l'élément par exemple racine, ou les enfants d'un élément svg.