如果動態加載，SVG不會在Android和Safari

這裏玩動畫的SVG部分：如果動態加載，SVG不會在Android和Safari

<svg id='canvBg' class='radar_canv' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' style='z-index: 0' width='240' height='240'> 
<defs> 
<radialGradient id='backGrad' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'> 
<stop offset='0%' style='stop-color:rgb(0,190,0);stop-opacity:1'></stop> 
<stop offset='100%' style='stop-color:rgb(0,140,0);stop-opacity:1'></stop> 
</radialGradient> 
</defs> 
<circle id='radarBack' cx='50%' cy='50%' r='50%' stroke='rgb(50,240,50)' stroke-idth='2' fill='url(#backGrad)'></circle> 
<line x1='50%' y1='0%' x2='50%' y2='100%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line> 
<line x1='0%' y1='50%' x2='100%' y2='50%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line> 
<text x='2%' y='49%' fill='navy' font-size='18'></text> 
<g id='gg2'> 
<rect x='50%' y='45%' width='50%' height='5%' fill='green'> 
<animateTransform xlink:href='#gg2' attributeType='XML' attributeName='transform' type='rotate' from='0' to='45' dur='10s' fill='freeze' /> 
</rect> 
</g> 
</svg>

我這段代碼加載到動態的<body>，它在PC上播放很大，但它失敗在我的Android和iPhone的Safari上運行。它加載圖形，但不會播放動畫。只有當SVG從頭開始嵌入頁面時纔會播放動畫。

我已經嘗試通過createElementNS創建所有元素與相應的名稱空間並相應地設置屬性，但沒有成功。

可能是什麼原因，是否有解決方案？

P.S.不能使用任何外部庫，大家。不建議。

來源

2013-05-05 Michael Sazonov

聽起來https://bugs.webkit.org/show_bug.cgi?id=82647或https://bugs.webkit.org/ show_bug.cgi？id = 74801 – 2013-05-05 12:52:09

@RobertLongson非常感謝。 – 2013-05-05 13:39:47

我不確定這是否會對您有所幫助，但是我所做的以及似乎正在工作的是通過subresource關係預載您的svg「圖像」。

HAML %link{ href: 'path/to.svg', rel: 'subresource'}

HTML <link href="path/to.svg" rel="subresource"/>

就我而言，我使用SVG作爲通過CSS背景。在資源分包之前，它會在後續重新加載後停止動畫。這似乎解決了它。還應該注意的是，我正在使用Angular 1.x（在撰寫本文時爲1.6.1）。這種預加載使我可以在頁面其餘部分之前乾淨地加載資源，這可能使瀏覽器有機會在嘗試顯示資源並默認爲靜態圖像之前完全實現資源。

這當然是猜測，但我不能與結果爭辯。對不起，這不是一個更科學的答案。因人而異。很想聽聽這是否適用於其他人！

瞭解更多關於在這裏：https://css-tricks.com/prefetching-preloading-prebrowsing/（在我使用的資源）

來源

2017-02-08 21:58:07 Volte

如果動態加載，SVG不會在Android和Safari

回答

相關問題