javascript - 在 JS 中，获取 SVG 路径的实际(计算)笔划宽度

Question

给定 SVG 路径元素的 DOM 节点，我如何以其父元素为单位获取该路径的 stroke-width？目标是通过向路径的父级添加附加元素来向路径添加“装饰”，其尺寸与路径的 stroke-width 成比例。路径的 stroke-width 可以通过 CSS、内联样式或任何其他可能影响笔划的方式来确定。

我知道我可以获得计算样式值 window.getComputedStyle(node)['stroke-width']。但这会返回一个包含单位的字符串。

这些单位适用于什么坐标系？我是否可以假设单位始终为 px，从而简单地去掉最后两个字符以获得一个数字？

Answer 1

根据 documentation getComputedStyle() 返回所谓的 computed values对于大多数属性，它被定义为 px。所以你可以尝试做这样的事情:

var value = window.getComputedStyle(node)['stroke-width'];
if (value.match(/^\-?\d+(\.\d+)px$/)) {
  value = parseFloat(value.substr(-2));
} else {
  // Examine value further
} 

我使用 parseFloat 而不是 parseInt 因为计算值可能是原始值的小数被定义为非 px 单位。