Quando você usa inline , todos os elementos estão no DOM, assim como s e s e qualquer outro elemento HTML.
Se você tem SVG como:
e você faz:
var rect = document.getElementById("foo");você obterá uma referência a isso .
E não apenas isso, você pode anexar ouvintes de eventos que funcionam exatamente como você espera. E você pode ajustar os atributos e qualquer outra coisa que você esperaria ser capaz de fazer com o JavaScript.
Há pelo menos uma pegadinha, que me pegou. Freqüentemente, anexamos ouvintes de eventos a links, estilo de aprimoramento progressivo. Na arquitetura JavaScript não trivial, é provável que esses ouvintes de evento passem o evento para outras funções que tratam da funcionalidade. Depender da thispalavra - chave nessas situações pode ser complicado e geralmente não é recomendado. Em vez disso, como você tem o event, você pode usar event.target. No entanto, isso pode ser igualmente complicado, já que com o SVG embutido o destino pode ser o link, o próprio elemento SVG ou qualquer uma das formas SVG.
A solução é retornar o DOM para um local esperado. Ou tente evitar a situação com:
svg ( pointer-events: none; )O que eu recomendo se você não planeja usar nenhuma interatividade dentro do próprio SVG.