37: SVG ve JavaScript / DOM Olayları - CSS Hileleri

Anonim

Satır içi kullandığınızda , tüm öğeler DOM'da bulunur, tıpkı s ve s ve diğer HTML öğeleri gibi.

SVG'niz varsa:

 

ve sende yap:

var rect = document.getElementById("foo");

buna bir referans alacaksınız .

Ve sadece bu değil, beklediğiniz gibi çalışan olay dinleyicileri ekleyebilirsiniz. Ayrıca, öznitelikleri ve JavaScript ile yapmayı beklediğiniz diğer her şeyi ayarlayabilirsiniz.

Yine de beni anlayan en az bir gotcha var. Etkinlik dinleyicilerini genellikle bağlantılara, aşamalı geliştirme stiline ekleriz. Önemsiz olmayan JavaScript mimarisinde, olay dinleyicilerinin olayı, işlevselliği işleyen diğer işlevlere geçirmesi muhtemeldir. thisBu durumlarda anahtar kelimeye güvenmek zorlaşır ve genellikle önerilmez. Bunun yerine, sahip eventolduğunuz için kullanabilirsiniz event.target. Yine de, satır içi SVG ile hedef bağlantı, SVG öğesinin kendisi veya herhangi bir SVG şekli olabileceğinden, bu da biraz karmaşık olabilir.

Çözüm, DOM'u beklenen bir yere geri döndürmektir. Veya şunlarla durumdan kaçınmaya çalışın:

svg ( pointer-events: none; )

SVG'nin kendisinde herhangi bir etkileşim kullanmayı planlamıyorsanız bunu tavsiye ederim.