无法从<path>

Question

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

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

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

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

  

未捕获的TypeError：path.getTotalLength不是函数       在评估时

我怀疑并希望发现并修复它确实很容易，但是我缺乏想法...

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