为什么Firefox不测量这个SVG路径的长度
Why will Firefox not measure the length of this SVG path
SVG:
<g fill="none" stroke-width="0.6">
<path id="trouble" stroke-miterlimit="10" stroke="#ff5500" d="M1051.19,607.23c3.8-1.9,4.1,4.9,3.5,7c-0.7,2.3-2.6,4.6-5.3,3.8c-3.9-1.1-4.4-6.9-4-10.1c0.8-7.2,7.2-10.7,12.2-4.4c4.1,5.2,5.4,15.4,4.7,21.8c-0.5,4.4-3.3,10.4-8.8,8.1c-4.6-1.9-4.4-9.8-0.1-11.9c7.9-3.8,4.5,12.1-0.3,6.8"/>
</g>
Chrome和Firefox都正确地绘制了红色的小波浪。Chrome使用path.getTotalLength()
正确测量路径长度。Firefox返回路径长度的NaN
。为什么?
(我有几十个其他路径,Firefox可以正确测量其长度。特别是这个路径,使用Illustrator生成。语法对我来说是正确的AFAIK。)
参见:
http://codepen.io/anon/pen/oXpqqg
如果稍微调整路径以解决FF错误,就可以使其工作。
有一条曲线似乎触发了这个错误:
c0.8-7.2,7.2-10.7,12.2-4.4
如果你稍微改变一下,就可以避免这个错误:
c0.9-7.2,7.2-10.7,12.2-4.4
演示
相关文章:
- 使用onclick绘制SVG路径
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 如何设置SVG路径的样式以拍摄图像
- Html5-使用SVG路径绘制的组织层次结构在左手边被剪裁
- SVG路径命中测试
- 我如何才能让这个svg圆圈出现在我的d3路径上方,而不是下方
- 更快的SVG路径操作
- 以编程方式确定由 SVG 路径生成的形状
- 将 SVG 路径雕刻成矩形,在矩形中留下一个“孔”
- 使用正则表达式提取 svg 路径
- 如何在 JavaScript 中计算 SVG 路径的椭圆路径坐标
- SVG 路径未显示
- svg路径动画整个路径
- 使用Javascript获取SVG路径的绝对坐标
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 使用Snap.svg的带有箭头标记的动画路径
- 改变<svg>对象's路径
- 画布的SVG路径
- jQuery 在文本路径 svg 元素方面存在问题
- 调整多边形点路径(svg)内的图像大小并使其不被剪裁