[英]animated SVG + cross browser compatibility
我在使用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。
如果要保留圓角帽,則一種變通方法是確保行不完全在虛線數組端點上開始和結束。 在paint()
函數中更改這兩行。
path.style.strokeDasharray = length + ' ' + (length+2);
path.style.strokeDashoffset = (length+1);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.