0
目前,我有以下SVG,並希望動畫路徑:簡單的SVG縮放
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="112.5px" height="115.4px" viewBox="0 0 112.5 115.4" enable-background="new 0 0 112.5 115.4" xml:space="preserve">
<g>
<ellipse fill="#333333" cx="56.3" cy="56.3" rx="56.3" ry="56.3"/>
</g>
<g>
<path fill="none" class="iphone-feature-icon-heart-path" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M82.6,50L82.6,50c-0.2-8.1-6.9-15.2-15.1-15.2
c-4.8,0-9,2.4-11.8,6c-2.8-3.6-7-6-11.8-6c-8.3,0-15,7.2-15.1,15.2h0c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.1,0.6
c0.7,20.5,26.6,29,26.6,29s26.3-8.4,27.1-28.9c0-0.2,0.1-0.4,0.1-0.6c0,0,0-0.1,0-0.1C82.6,50.1,82.6,50.1,82.6,50z"/>
</g>
A「脈衝」沿路徑的原點動畫就是希望。我試過在最後一組之間放棄這個,但是有一些問題。首先,它不會回到原始尺度。
<animateTransform attributeType="XML"
attributeName="transform" type="scale"
from="1 1" to="1.5 1.5"
begin="0s" dur="2s" fill="freeze"/>
其次,它並不沿着路徑的中心點進行縮放。我曾考慮使用變換原點50%,50%,並在css中做脈衝,但是這在firefox中不起作用(或者至少它不會沿着真實原點生成動畫)。
請參閱小提琴: http://jsfiddle.net/y1kdna46/3/
從閱讀各地看來,似乎有一個轉換矩陣,可以用來做這個跨瀏覽器。任何提示/建議?盡我所能,我希望避免CSS/JavaScript來執行此操作。即在SVG的代碼中完成。
傳奇。工作過一種享受。 – Paul