javascript - 动画 SVG + 跨浏览器兼容性

Question

我在使用 http://lazylinepainter.info/ 创建的动画 SVG 时遇到问题

在 Chrome 上它运行完美。但是在 Safari、Firefox 和 iOS 上，动画将十字的终点显示为点。这是我的 fiddle :

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

任何有关如何消除这些点的帮助将不胜感激。

Answer 1

这似乎是 FF 中的一个错误(无论如何是 IMO)。如果线恰好在破折号端点结束，则不应绘制线端点。

一个快速解决方法是将笔划帽更改为“屁股”。

'strokeCap': 'butt',

这至少适用于 Firefox。我无法测试这是否适用于 Safari。

如果您想要保留圆帽，则解决方法是确保线条的起点和终点不正好位于 dasharray 端点。更改 paint() 函数中的这两行。

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

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