SVG動畫漸變色

我有以下SVG代碼：SVG動畫漸變色

<svg height="130" width="500"> 
 
    <defs> 
 
    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> 
 
     <stop offset="0%" stop-color="#054f16"> 
 
     <animate attributeName="stop-color" values="#054f16; #91bc9c" dur="4s" repeatCount="indefinite"></animate> 
 
     </stop> 
 
     <stop offset="100%" stop-color="#01FF89"> 
 
     <animate attributeName="stop-color" values="#91bc9c; #054f16" dur="4s" repeatCount="indefinite"></animate> 
 
     </stop> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" /> 
 
    <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> 
 
    Sorry, your browser does not support inline SVG. 
 
</svg>

我期待動畫漸變中保持平穩的SVG容器流動，後面的文本。正如你可以從this fiddle看到的那樣，它很跳躍。我該如何解決？謝謝！

來源

2017-07-28 TheRealPapa

要讓動畫循環/返回起點，只需爲每個values屬性添加一個額外的值。該值應該是起始顏色。

<svg height="130" width="500"> 
 
    <defs> 
 
    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> 
 
     <stop offset="0%" stop-color="#054f16"> 
 
     <animate attributeName="stop-color" values="#054f16; #91bc9c; #054f16" dur="4s" repeatCount="indefinite"></animate> 
 
     </stop> 
 
     <stop offset="100%" stop-color="#01FF89"> 
 
     <animate attributeName="stop-color" values="#91bc9c; #054f16; #91bc9c" dur="4s" repeatCount="indefinite"></animate> 
 
     </stop> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" /> 
 
    <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> 
 
    Sorry, your browser does not support inline SVG. 
 
</svg>

來源

2017-07-28 18:15:16

SVG動畫漸變色

回答

相關問題