37: СВГ и ЈаваСцрипт / ДОМ догађаји - ЦСС-трикови

Anonim

Када користите уграђени , сви елементи су у ДОМ-у, баш као и с и с и било који други ХТМЛ елемент.

Ако имате СВГ попут:

 

и ти:

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

добићете референцу на то .

И не само то, можете да прикачите слушатеље догађаја који раде баш онако како бисте очекивали. Можете прилагодити атрибуте и све остало што бисте очекивали да ћете моћи да урадите са ЈаваСцрипт-ом.

Ипак постоји бар једна потешкоћа која ме је ухватила. Слушалице догађаја често повезујемо са везама, у прогресивном побољшању. У не тривијалној ЈаваСцрипт архитектури, вероватно они који слушају догађаје прослеђују догађај другим функцијама које рукују том функционалношћу. Ослањање на thisкључну реч у тим ситуацијама постаје незгодно и често се не препоручује. Уместо тога, пошто имате event, можете да користите event.target. Ово може бити подједнако незгодно, јер код уграђеног СВГ циљ може бити веза, сам СВГ елемент или било који од СВГ облика.

Решење је враћање ДОМ-а натраг на очекивано место. Или покушајте да избегнете ситуацију уопште са:

svg ( pointer-events: none; )

Што бих препоручио ако не планирате да користите интерактивност у оквиру СВГ-а.