动画SVG +跨浏览器兼容性
我在使用http://lazylinepainter.info/创建的动画SVG时遇到问题
在Chrome上它完美无缺。 但是在Safari，Firefox和iOS上，动画将十字的终点显示为点。 这是我的小提琴：
http://jsfiddle.net/ric0c/aqn6zkf4/1/
这是我的svg代码：
var pathObj2 = { "strategy": { "strokepath": [ { "path": " M22.5,59.6c10.8,0,19.5,8.7,19.5,19.5s-8.7,19.5-19.5,19.5S3,89.8,3,79.1c0-10.7,8.7-19.4,19.4-19.5", "duration": 600 }, { "path": " M177.4,3c10.8,0,19.5,8.7,19.5,19.5S188.2,42,177.4,42s-19.5-8.7-19.5-19.5c0-10.7,8.7-19.4,19.4-19.5", "duration": 600 }, { "path": " M113.5,155.6c10.8,0,19.5,8.7,19.5,19.5c0,10.8-8.7,19.5-19.5,19.5S94,185.8,94,175.1c0-10.7,8.7-19.4,19.4-19.5", "duration": 600 }, { "path": " M200.1,57.1c10.8,12.5,17.3,28.8,17.3,46.6c0,39.4-31.9,71.3-71.3,71.3", "duration": 600 }, { "path": "M 141.2 73.7 L 166.2 98.7", "duration": 600 }, { "path": "M 166.2 73.7 L 141.2 98.7", "duration": 600 }, { "path": "M 78.2 116.1 L 103.2 141.1", "duration": 600 }, { "path": "M 103.2 116.1 L 78.2 141.1", "duration": 600 }, { "path": "M 235.2 142.1 L 260.2 167.1", "duration": 600 }, { "path": "M 260.2 142.1 L 235.2 167.1", "duration": 600 }, { "path": "M 196.1,76.7 200.1,57.1 219.7,61.1 L 196.1,76.7 200.1,57.1 219.7,61.1 ", "duration": 600 } ], "dimensions": { "width": 264, "height": 198 } } }; $('#strategy').lazylinepainter({ "svgData": pathObj2, "strokeWidth": 6, "strokeColor": "#FFFFFF", 'onComplete' : function(){ setTimeout(function() { $('#strategy').lazylinepainter('erase'); $('#strategy').lazylinepainter('paint'); }, 5000); } }).lazylinepainter('paint'); var state = 'paint'; $('#strategy').lazylinepainter(state); 任何有关如何消除这些点的帮助将不胜感激。
这似乎是FF（IMO无论如何）的一个错误。 如果线正好在虚线端点处结束，则不应绘制线端盖。
一个快速解决方法是将你的笔画帽改为“对接”。
'strokeCap': 'butt',
这至少适用于Firefox。 我无法测试这是否适用于Safari。
如果你想保留圆形帽，那么解决方法是确保线不会在dasharray端点上完全开始和结束。 在paint()函数中更改这两行。
path.style.strokeDasharray = length + ' ' + (length+2); path.style.strokeDashoffset = (length+1);