37: SVG и JavaScript / DOM събития - CSS-трикове

Anonim

Когато използвате вграден , всички елементи са в DOM, точно като s и s и всеки друг HTML елемент.

Ако имате SVG като:

 

и вие правите:

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

ще получите препратка към това .

И не само това, можете да прикачите слушатели на събития, които работят точно както очаквате. И можете да коригирате атрибути и всичко друго, което очаквате да можете да правите с JavaScript.

Все пак има поне едно нещо, което ме хвана. Често прикачваме слушатели на събития към връзки, прогресивен стил на подобрение. В нетривиалната архитектура на JavaScript вероятно слушателите на събития предават събитието на други функции, които обработват функционалността. Разчитането на thisключовата дума в тези ситуации става сложно и често не се препоръчва. Вместо това, тъй като имате event, можете да използвате event.target. Това обаче може да бъде също толкова сложно, тъй като при вградения SVG целта може да бъде връзката, самият SVG елемент или изобщо която и да е от SVG фигурите.

Решението е да върнете обратно DOM до очакваното място. Или изобщо се опитайте да избегнете ситуацията с:

svg ( pointer-events: none; )

Което бих препоръчал, ако не планирате да използвате каквато и да е интерактивност в самия SVG.