動畫SVG漸變

我想生成隨時間變化的SVG漸變。動畫SVG漸變

在這個例子中的代碼，我想生成的橢圓，其梯度爲紅色與黃色的條紋，從西行進至東部隨時間（創建微光效果）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
     <animate 
      attributeName="offset" 
      from="0%" 
      to="100%" 
      repeatCount="indefinite"/> 
     </stop> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
</svg>

這並未」但是我不確定是不是因爲我做錯了，或者這不是我用SVG漸變實現的效果。

來源

2011-12-20 rampion

你只需要一段時間的動畫。例如，添加dur="5s"作爲animate元素的屬性。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
 
     <animate 
 
      attributeName="offset" 
 
      from="0%" 
 
      to="100%" 
 
      dur="5s" 
 
      repeatCount="indefinite"/> 
 
     </stop> 
 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
 
</svg>

來源

2011-12-20 21:58:01

嗯，我試過了，但它仍然無法正常工作？ http://jsfiddle.net/kg6Pg/ –

您的鏈接適用於Firefox。 –

但是對我來說不適用於Chrome – Denis

下面是一個example，關於Firefox和Chrome的工作：

屬性的值是在規範here提供在本例中使用。

<linearGradient id="myG"> 
<stop offset="0" stop-color="#f15361"> 
</stop> 
<stop offset=".25" stop-color="#fbaf4a"> 
<animate attributeName="offset" dur="5s" values="0;1;0" 
    repeatCount="indefinite" /> 
</stop> 
<stop offset="1" stop-color="#f15361"/>

來源

2014-04-03 05:29:23 Priyanka

回答

相關問題