Lorsque vous utilisez inline , tous les éléments sont dans le DOM, tout comme s et s et tout autre élément HTML.
Si vous avez SVG comme:
et vous faites:
var rect = document.getElementById("foo");vous obtiendrez une référence à cela .
Et non seulement cela, vous pouvez attacher des écouteurs d'événements qui fonctionnent comme vous le souhaitez. Et vous pouvez ajuster les attributs et tout ce que vous attendez de pouvoir faire avec JavaScript.
Il y a au moins un piège cependant, qui m'a attrapé. Nous attachons souvent des auditeurs d'événements à des liens, style d'amélioration progressive. Dans une architecture JavaScript non triviale, il est probable que ces écouteurs d'événements transmettent l'événement à d'autres fonctions qui gèrent la fonctionnalité. S'appuyer sur le thismot - clé dans ces situations devient délicat et n'est souvent pas recommandé. Au lieu de cela, puisque vous avez le event, vous pouvez utiliser event.target. Cela peut être tout aussi délicat, car avec SVG en ligne, la cible peut être le lien, l'élément SVG lui-même ou n'importe laquelle des formes SVG.
La solution est de remonter le DOM vers un endroit attendu. Ou essayez d'éviter la situation du tout avec:
svg ( pointer-events: none; )Ce que je recommanderais si vous ne prévoyez pas d'utiliser d'interactivité dans le SVG eux-mêmes.