如何讓svg動畫在圖形中心周圍縮放？

我試圖通過使用animateTransform和type="scale"來使一顆恆星產生脈動，但不是圍繞恆星的中心縮放，而是向左和向下縮放。如何縮放中心周圍的星星？如何讓svg動畫在圖形中心周圍縮放？

SVG編碼：

<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" x="170px" y="385px" width="100px" height="100px" viewBox="0 0 60 60" xml:space="preserve"> 
    <g> 
     <polygon fill="#DAC978" points="18.832,36.694 5.903,25.156 23.146,23.419 30.125,7.557 37.104,23.419 54.347,25.155 41.417,36.694 45.095,53.629 30.125,44.898 15.155,53.63" /> 
     <path fill="#A58144" d="M30.125,13.765l4.104,9.327l1.175,2.669l2.901,0.292l10.139,1.021l-7.603,6.785L38.665,35.8l0.618,2.851 l2.162,9.957l-8.801-5.134l-2.519-1.469l-2.52,1.469l-8.803,5.134l2.162-9.957l0.619-2.85l-2.175-1.942l-7.603-6.785l10.139-1.021 l2.901-0.292l1.174-2.669L30.125,13.765 M30.125,1.35l-8.681,19.729L0,23.237l16.08,14.352l-4.574,21.063l18.62-10.858 l18.618,10.858L44.17,37.589l16.081-14.352l-21.445-2.159L30.125,1.35L30.125,1.35z" /> 
     <animateTransform 
      attributeType="xml" 
      attributeName="transform" 
      type="scale" 
      from="0" 
      by="1" 
      dur="1s" 
      repeatCount="10" 
     /> 

    </g> 
</svg>

jsFiddle有工作代碼。

來源

2014-09-20 Вова Пьяточкин

這裏是工作代碼http://jsfiddle.net/ayD2N/43/ – 2014-09-20 10:26:26

animateTransform類型scale似乎總是從原點開始在(0, 0)。一種可能的解決方案是翻譯您的多邊形，使其中心位於(0, 0)。

這裏是工作jsFiddle example。

你原來的代碼所做的更改：

視框從viewBox="0 0 60 60"變更爲viewBox="-30 -30 60 60"，以便有在(0, 0)的viewBox中心（關於viewBoxes你可以看到this tutorial）

polygon和path被分組，然後翻譯，以便他們的中心也在(0, 0)：

<g transform="translate(-30,-30)"> 
    <polygon ... /> 
    <path ... /> 
</g>

來源

2014-09-20 10:50:41

非常感謝！它爲我工作 – 2014-09-20 11:07:56

如何讓svg動畫在圖形中心周圍縮放？

回答

相關問題