无法从中<path>获取 getTotalLength()

Question

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

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

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

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

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

我怀疑并希望这是很容易发现和修复的东西，但我缺乏想法......

Answer 1

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

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

SVG 命名空间速成课程

//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);