Khi bạn sử dụng nội tuyến , tất cả các phần tử đều nằm trong DOM, giống như s và s và bất kỳ phần tử HTML nào khác.
Nếu bạn có SVG như:
và bạn làm:
var rect = document.getElementById("foo");bạn sẽ nhận được một tham chiếu đến điều đó .
Và không chỉ vậy, bạn có thể đính kèm trình nghe sự kiện hoạt động như bạn mong đợi. Và bạn có thể điều chỉnh các thuộc tính và bất kỳ điều gì khác mà bạn mong đợi có thể thực hiện với JavaScript.
Có ít nhất một gotcha, điều đó đã làm cho tôi. Chúng tôi thường gắn người nghe sự kiện với liên kết, phong cách nâng cao tiến bộ. Trong kiến trúc JavaScript không tầm thường, có khả năng những người nghe sự kiện đó chuyển sự kiện xung quanh cho các hàm khác xử lý chức năng đó. Việc dựa vào thistừ khóa trong những tình huống đó trở nên khó khăn và thường không được khuyến khích. Thay vào đó, vì bạn có event, bạn có thể sử dụng event.target. Tuy nhiên, điều này có thể phức tạp như vậy, vì với SVG nội tuyến, mục tiêu có thể là liên kết, bản thân phần tử SVG hoặc bất kỳ hình dạng SVG nào.
Giải pháp là sao lưu DOM đến một nơi mong đợi. Hoặc cố gắng và tránh tình huống với:
svg ( pointer-events: none; )Điều mà tôi khuyên bạn nên áp dụng nếu bạn không có kế hoạch sử dụng bất kỳ tương tác nào trong chính SVG.