在svg动画中涂抹

时间:2014-06-11 06:03:01

标签: vector svg vector-graphics

我正在为SVG制作动画,并注意到浏览器加载完成后不应存在的污点或SVG片段。如果您检查此代码笔 - http://codepen.io/claire2013/pen/ouIeg,您会注意到眼镜鼻子附近左侧有一点黑色污迹/绘图。任何人都知道为什么会这样?

1 个答案:

答案 0 :(得分:3)

快速简单的答案
看起来你的路径中有一个额外的段。搜索以下字符串并将其删除:

M207.795,61.239l0.097,0.008L207.795,61.239z

(另外,在文档的最开头还有一个额外的<)

请在此处查看固定代码:http://codepen.io/guttentag/pen/JnFzx

进一步说明
在SVG路径中,M命令表示您希望浏览器将笔移动到其后面的坐标以启动路径。 Other commands跟随,直到您使用Z命令关闭路径。

因为"涂抹"事实上,在一张纸上看起来像是一个错误的笔划,我试着寻找M字符的路径。当我发现一个不久之后是Z的时候,我知道这是一段不属于的路径。我删除了它,涂抹消失了。如果我删除了错误的段,我会点击撤消并尝试下一个可能的嫌疑人。使用该技术可以帮助您将来解决类似的SVG路径问题。