求助：动态创建SVG Path元素无法调用getTotalLength()方法

问题核心：用document.createElement()动态创建SVG元素时，元素会被归为HTML命名空间，而非SVG命名空间，因此无法被识别为SVGGeometryElement，自然没有getTotalLength()方法。

解决步骤 #

• 创建SVG及其子元素时，必须使用document.createElementNS()，并指定SVG专属命名空间http://www.w3.org/2000/svg
• 替换原代码中创建svg和path的方法

修正后的代码 #

HTML（无需修改）

<!DOCTYPE html>
<html>
    <body>
        <p id="svg1">SVG with id "test" has a length of </p>
        <svg>
          <path id="test" d="M10 10 h 80 v 80 h -80 Z"></path>
        </svg>
        
        <p id="svg2">SVG generated has a length of </p>
        <div id="generated-svg">
        
        </div>
    </body>
</html>

JavaScript（修改创建元素的核心逻辑）

let svg1 = document.getElementById("svg1");
let path1 = document.getElementById("test");
svg1.innerHTML = svg1.innerHTML + path1.getTotalLength();

// 定义SVG命名空间常量
const SVG_NS = "http://www.w3.org/2000/svg";
// 使用命名空间创建SVG元素
let svgNode = document.createElementNS(SVG_NS, "svg");

// 同样用命名空间创建Path元素
let pathNode = document.createElementNS(SVG_NS, "path");
svgNode.appendChild(pathNode);
pathNode.setAttribute("d", "M10 10 h 80 v 80 h -80 Z");

document.getElementById("generated-svg").appendChild(svgNode);
            
try {
  const length = pathNode.getTotalLength();
  console.log("path Length: " + length);
  let svg2 = document.getElementById("svg2");
  svg2.innerHTML = svg2.innerHTML + length;
} catch (error) {
  console.log(error);
  let svg2 = document.getElementById("svg2");
  svg2.innerHTML = svg2.innerHTML + " .getTotalLength() is not a method :/";
}

原理说明 #

HTML中直接嵌入的SVG元素，浏览器会自动识别其属于SVG命名空间；但通过JS动态创建时，若使用普通的createElement()，元素会被归类到HTML命名空间，无法获得SVG元素特有的方法和属性。显式使用createElementNS()指定命名空间后，浏览器才会将其识别为标准SVG元素，从而支持getTotalLength()这类SVGGeometryElement的专属方法。

内容的提问来源于stack exchange，提问作者Jordan