在JS中,获取SVG路径的实际(计算)stoke-width

时间:2017-10-29 10:44:53

标签: javascript css svg

给定SVG路径元素的DOM节点,我如何以它的父元素为单位获得该路径的stroke-width?目标是添加"装饰"通过向路径的父级添加其他元素来到路径,其尺寸确定与路径的笔划宽度成比例。路径的笔划宽度可以通过CSS,内联样式或其他可能影响笔划的方式来确定。

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

这些单位适用于哪种坐标系?我可以假设单位总是px,因此只需删除最后两个字符以获得数字吗?

1 个答案:

答案 0 :(得分:-2)

根据documentation 16 25 36 {16, 25, 36} ,大多数属性都会返回所谓的computed values,并将其定义为getComputedStyle()。所以你可以尝试做类似的事情:

px

我已使用var value = window.getComputedStyle(node)['stroke-width']; if (value.match(/^\-?\d+(\.\d+)px$/)) { value = parseFloat(value.substr(-2)); } else { // Examine value further } 代替parseFloat,因为计算值可能是原始值的小数可能被定义为非px单位。