Όταν χρησιμοποιείτε ενσωματωμένο , όλα τα στοιχεία βρίσκονται στο DOM, όπως τα s και s και οποιοδήποτε άλλο στοιχείο HTML.
Εάν έχετε SVG όπως:
και εσύ κάνεις:
var rect = document.getElementById("foo");θα λάβετε μια αναφορά σε αυτό .
Και όχι μόνο αυτό, μπορείτε να επισυνάψετε ακροατές συμβάντων που λειτουργούν όπως θα περίμενε κανείς. Και μπορείτε να προσαρμόσετε χαρακτηριστικά και οτιδήποτε άλλο θα περιμένατε να κάνετε με το JavaScript.
Υπάρχει τουλάχιστον ένα gotcha, που με έχει πάρει. Συνδέουμε συχνά ακροατές συμβάντων σε συνδέσμους, προοδευτικό στυλ βελτίωσης. Σε μη-ασήμαντη αρχιτεκτονική JavaScript, είναι πιθανό αυτοί οι ακροατές να μεταβιβάζουν το συμβάν σε άλλες λειτουργίες που χειρίζονται τη λειτουργικότητα. Η εμπιστοσύνη στη thisλέξη-κλειδί σε αυτές τις καταστάσεις γίνεται δύσκολη και συχνά δεν συνιστάται. Αντ 'αυτού, αφού έχετε το event, μπορείτε να το χρησιμοποιήσετε event.target. Αυτό μπορεί να είναι εξίσου δύσκολο, καθώς με ενσωματωμένο SVG ο στόχος θα μπορούσε να είναι ο σύνδεσμος, το ίδιο το στοιχείο SVG ή οποιοδήποτε από τα σχήματα SVG.
Η λύση είναι να διασχίσουμε το DOM σε ένα αναμενόμενο μέρος. Ή δοκιμάστε να αποφύγετε καθόλου την κατάσταση με:
svg ( pointer-events: none; )Αυτό που θα συνιστούσα αν δεν σκοπεύετε να χρησιμοποιήσετε οποιαδήποτε αλληλεπίδραση εντός του ίδιου του SVG.