如何判断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>元件本身实际上是一个HTML元素含有 SVG元素-这意味着,或许令人惊奇地,该<svg>HTML元素是不一个SVG元件,因此:

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