如何判断DOM元素是HTML还是SVG？

Question

我正在编写一个基础架构，需要对HTML元素与SVG元素进行不同的应用。给定DOM节点，我如何判断它是SVG还是HTML元素？

Answer 1

您可以尝试以下内容：

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>

请注意，<svg>元素本身实际上是一个包含SVG元素的HTML元素 - 这意味着，或许令人惊讶的是，<svg> HTML元素不是SVG元素，因此：

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

Answer 2

我不确定它是如何与浏览器兼容，但是我在浏览DOM属性并看到一个看似有希望的ownerSVGElement？

这就是我在玩的东西：http://jsbin.com/uMIronal/4/edit?html,js,output