getPointAtLength DOM 异常,但当 d-path 被分配 *without* 命名空间时不会

问题描述

正在执行:path.getPointAtLength(0)

为什么必须使用命名空间创建 path 是否有任何逻辑。
但是必须为 d 属性指定没有命名空间?

对于所有其他属性不使用 setAttributeNS 是否所有浏览器都是安全的?

DOMException: SVGGeometryElement.getPointAtLength: 没有可用于测量的路径

DOMException:无法在“SVGGeometryElement”上执行“getPointAtLength”:元素的路径为空。

const _NAMESPACE_ = "http://www.w3.org/2000/svg";
function getPoint(label,path) {
  try {
    let l = path.getPointAtLength(0);
    console.log(label,l.x,l.y )
  } catch (e) {
    console.error(label,e.stack.split("\n")[0])
  }
}
// Works fine:
let P1 = document.createElementNS(_NAMESPACE_,"path");
P1.setAttribute('d',`M1 1`);
getPoint('P1',P1);

//Error: DOMException The elements's path is empty
let P2 = document.createElementNS(_NAMESPACE_,"path");
P2.setAttributeNS(_NAMESPACE_,'d',`M2 2`);
getPoint('P2',P2);

//Error: getPointAtLength is not a function
let P3 = document.createElement("path");
P3.setAttributeNS(_NAMESPACE_,`M3 3`);
getPoint('P3',P3);

//Error: getPointAtLength is not a function
let P4 = document.createElement("path");
P4.setAttribute('d',`M4 4`);
getPoint('P4',P4);

//works: namespace = null
let P5 = document.createElementNS(_NAMESPACE_,"path");
P5.setAttributeNS( null,`M5 5`);
getPoint('P5',P5);

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)