无法从 <path> 获取 getTotalLength() [关闭]

【问题标题】：Can't get getTotalLength() from <path> [closed]无法从 <path> 获取 getTotalLength() [关闭]
【发布时间】：2019-08-08 10:56:18
【问题描述】：

我正在尝试创建一个 SVG 路径元素而不将其附加到 DOM 并仅计算其长度，但由于某种原因我没有这样做。

在创建一个新元素并添加适当的长度后，它不允许我调用 getTotalLength() 函数来获取它的长度。可以通过在任何浏览器控制台上复制粘贴以下行来重新创建它：

var path = document.createElementNS('SVG', 'path');
d3.select(path).attr('d', 'M' + 10 + ',' + 10 + 'L' + 75 + ',' + 75);
path.getTotalLength();

这是最后一行代码的错误：

未捕获的类型错误：path.getTotalLength 不是函数在评估中

我怀疑并希望它真的很容易发现和修复，但我缺乏想法......

【问题讨论】：

好吧，'SVG' 不是正确的命名空间。试试document.createElementNS('http://www.w3.org/2000/svg', 'path')

标签： javascript d3.js svg

【解决方案1】：

“SVG”不是正确的命名空间。您正在尝试创建一个名为 path 的普通 HTML 元素，它没有任何名为 path.getTotalLength() 的函数。

试试document.createElementNS('http://www.w3.org/2000/svg', 'path')

SVG-Namespaces Crashcourse

//var path = document.createElementNS('SVG', 'path');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d','M' + 10 + ',' + 10 + 'L' + 75 + ',' + 75)
console.log(path.getTotalLength());

这就是区别：

//REM: No SVG element
var path1 = document.createElementNS('SVG', 'path');

//REM: SVG element
var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');

console.log('path1', path1 instanceof SVGElement);
console.log('path2', path2 instanceof SVGElement);

【讨论】：