Wie erkenne ich, ob ein DOM-Element HTML oder SVG ist?

Ich schreibe ein Teil der Infrastruktur, die anders als HTML-Elemente im Vergleich zu SVG-Elementen angewendet werden muss. Wie kann ich bei einem DOM-Knoten erkennen, ob es sich um ein SVG- oder HTML-Element handelt?Wie erkenne ich, ob ein DOM-Element HTML oder SVG ist?

Quelle

2013-12-23 George Mauer

nicht darüber einig, dass dies ein Codebeispiel muss das Problem zu erklären, ist die Frage aus dem Text klar. – David

@David ist nicht nur der nahe Grund absurd, aber Sie werden sehen, dass die Frage eine solide Antwort bekam, die anderen innerhalb von 30 Minuten von Nutzen sein würde. Ich habe keine Ahnung, was die Jungs hier dachten. –

Sie können so etwas wie das folgende versuchen:

if(document.getElementById("el") instanceof SVGElement) { 
 
    console.log("It's an SVG element"); 
 
}

<svg xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="300" height="300"> 
 
    <g id="firstGroup"> 
 
    <rect id="el" width="100" height="50" x="40" y="20" fill="blue" /> 
 
    <text x="40" y="100">This is a basic SVG document!</text> 
 
    </g> 
 
</svg>

Beachten Sie, dass das <svg> Element selbst ist eigentlich ein HTML-Element enthältSVG Elemente - was bedeutet, dass, vielleicht überraschend, die <svg> HTML-Element ist nicht ein SVG Element, daher:

console.log(document.createElement("svg") instanceof SVGElement)) // => false

Quelle

2013-12-23 18:30:18

Das fühlt sich righter an. –

Danke @BillCriswell, ich denke ja! –

Ich habe if (element.getBBox) {um zu überprüfen, ob das Element eine getBBox-Methode hat. Bestimmte Funktionen/Methoden existieren nur für SVG-Elemente. –

Ich bin mir nicht sicher, wie Cross-Browser kompatibel ist, aber ich stocherte durch die DOM-Eigenschaften und sah eine ownerSVGElement, die vielversprechend scheint? Hier

geht, was ich Herumspielen mit: http://jsbin.com/uMIronal/4/edit?html,js,output

Quelle

2013-12-23 18:17:04

Beachten Sie, dass dieser Ansatz nicht funktioniert, wenn das SVG-Element nicht bereits einem Dokument hinzugefügt wurde, z. B. "document.createElementNS (" http://www.w3.org/2000/svg "," circle "). ownerSVGElement' wird 'null', also ist 'instanceof' auf diese Weise zuverlässiger und [führt auch zu besseren Ergebnissen (https://jsperf.com/check-if-svg-element/1). –

Wie erkenne ich, ob ein DOM-Element HTML oder SVG ist?

Antwort

Verwandte Themen