動畫SVG圖像

我可以動畫SVG圓圈嗎？動畫SVG圖像

<svg> 
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> 
    <animate 
     xlink:href="#orange-circle" 
     attributeName="cx" 
     from="50" 
     to="450" 
     dur="1s" 
     fill="freeze" 
     repeatCount="indefinite" /> 
</svg>

同樣，我試圖動畫圖像：

<svg> 
    <image id="orange-circle" x="0" y="20" width="200" height="180" xlink:href="cat.png" /> 
    <animate 
     xlink:href="#orange-circle" 
     attributeName="cx" 
     from="50" 
     to="450" 
     dur="1s" 
     fill="freeze" 
     repeatCount="indefinite" /> 
</svg>

我怎樣才能讓上面的代碼工作？

來源

2016-08-19 Mohammad Fareed

什麼似乎是實際問題？動畫是不是開始了？究竟是什麼與他們呢？有沒有可能發揮作用的周邊代碼？ – dakab

看一個FAQ animate：https://css-tricks.com/transforms-on-svg-elements/ – KingRider

實施例的代碼（容易）與圖像是美觀：

<svg> 
 
    <circle fill="blue" cx="150" cy="100" r="50"></circle> 
 
    <image xlink:href="http://i.imgur.com/ANS7Rkc.png" x="-50" y="72" width="100" height="50"> 
 
    <animate attributeName="x" from="-50" to="300" dur="5s" repeatCount="indefinite"></animate> 
 
    </image> 
 
</svg>

實施例（無圖像） https://codepen.io/danjiro/post/how-to-make-svg-loop-animation

教程： https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

加我們;）

來源

2016-08-19 13:16:44 KingRider

謝謝，樂於助人。 –

回答

相關問題