动画SVG +跨浏览器兼容性 [英] animated SVG + cross browser compatibility

问题描述

我在使用 http://lazylinepainter.info/

在Chrome上它完美无缺。然而，在Safari，Firefox和iOS上，动画将十字的终点显示为点。这是我的小提琴：

http：// jsfiddle .net / ric0c / aqn6zkf4 / 1 /

这里是我的svg代码：

  var pathObj2 = {
策略：{
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，
持续时间：600 
}，
 {
路径：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，
持续时间：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，
持续时间：600 
}，
 { 
路径：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，
持续时间：600 
}，
 {
路径：M 141.2 73.7 L 166.2 98.7，
持续时间：600 
}，
 {
路径：M 166.2 73.7 L 141.2 98.7，
持续时间：600 
}，
 {
路径：M 78.2 116.1 L 103.2 141.1 ，
持续时间：600 
}，
 {
路径：M 103.2 116.1 L 78.2 141.1，
持续时间：600 
}，
 {
path：M 235.2 142.1 L 260.2 167.1，
持续时间：600 
}，
 {
路径：M 260.2 142.1 L. 235.2 167.1，
持续时间：600 
}，
 {
路径：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，
持续时间：600 
} 
]，
尺寸：{
宽度：264，
身高：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）; 
  

http://jsfiddle.net/aqn6zkf4/3/

I'm having trouble with an animated SVG I created using http://lazylinepainter.info/

On Chrome it works perfectly. However on Safari, Firefox and iOS the animation shows the end points of the crosses as dots. Here's my fiddle:

http://jsfiddle.net/ric0c/aqn6zkf4/1/

and here's my svg code:

    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);

Any help on how to eliminate those dots would be appreciated.

解决方案

This seems to be a bug in FF (IMO anyway). It should not be drawing the line endcaps if the line ends exactly at a dash endpoint.

One quick fix is to change your stroke-caps to "butt".

'strokeCap': 'butt',

This works on Firefox at least. I can't test whether this works on Safari.

If you want to keep the round caps, then a workaround is to make sure that the lines don't start and end exactly on a dasharray endpoint. Change these two lines in the paint() function.

path.style.strokeDasharray = length + ' ' + (length+2);
path.style.strokeDashoffset = (length+1);

http://jsfiddle.net/aqn6zkf4/3/

这篇关于动画SVG +跨浏览器兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！