SVG SMIL動畫成長元素

任何人都可以解釋我決定「成長」動畫的方向嗎？我會舉幾個例子 SVG SMIL動畫成長元素

<svg version="1.1" id="Ring" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve"> 
 
    
 
    <path id="innerRing" fill="none"; stroke="#F7DE4B"; stroke-width="10"; stroke-miterlimit="10"; d="M227.1,25.8c-43.4,0-78.6,8.6-78.6,19.4s35.2,19.4,78.6,19.4s78.6-8.6,78.6-19.4 
 
\t S270.6,25.8,227.1,25.8z"/> 
 

 
<animate xlink:href="#innerRing" attributeName="stroke-dasharray" from="0 168.409 0 168.409 " to="0 0 326.818 0" begin="0" dur="1" repeatCount="1" /> 
 

 
\t <path id="outerRingMin" fill="none"; stroke="#B2A31B"; stroke-width="0.9"; stroke-miterlimit="10"; 
 
\t d="M227.1,59.8c-40.5,0-73.2-6.5-73.2-14.5s32.8-14.5,73.2-14.5c40.5,0,73.2,6.5,73.2,14.5 
 
\t S267.5,59.8,227.1,59.8"/> 
 

 
\t <animate xlink:href="#outerRingMin" attributeName="stroke-dasharray" from="0 153.693 0 153.693" to="0 0 307.386 0" begin="0" dur="1" repeatCount="1" /> 
 
\t 
 
\t <path id="outerRingMax" fill="none"; stroke="#B2A31B"; stroke-width="0.9"; stroke-miterlimit="10"; d="M227.1,69c46,0,83.4-10.7,83.4-24s-37.3-24-83.4-24c-46,0-83.4,10.7-83.4,24 
 
\t c0,13.2,36.7,23.8,82.1,24L227.1,69z"/> 
 

 
\t <animate xlink:href="#outerRingMax" attributeName="stroke-dasharray" from="0 181.92 0 181.92" to="0 0 363.84 0" begin="0" dur="1" repeatCount="1" /> 
 

 
    </svg>

爲什麼中間圈（黃色）從底部向上升高。？它如何改變？

來源

2017-02-13 BlackStar

因爲中間圓的起點是翻轉的。

修復它的最簡單方法是將stroke-dasshoffset屬性添加到中圈以移動筆畫的起始點，就像這樣。

<path id="innerRing" fill="none" stroke="#F7DE4B" 
stroke-dashoffset="168.409" 
stroke-width="10" stroke-miterlimit="10" 
d="M227.1,25.8c-43.4,0-78.6,8.6-78.6,19.4s35.2,19.4,78.6,19.4s78.6-8.6,78.6-19.4 
    S270.6,25.8,227.1,25.8z"/>

來源

2017-02-13 23:06:39 defghi1977

謝謝！不幸的是我不明白爲什麼會發生。爲什麼起點翻轉？ – BlackStar

路徑字符串的起點（d屬性的值）不相同。我想當你創建SVG時，你（或你的繪圖工具）就這樣定義了。如果我創建了這樣的動畫，我使用「use」元素來重用像這樣的http://jsdo.it/defghi1977/OYvq – defghi1977

酷的路徑定義。謝謝！ – BlackStar

SVG SMIL動畫成長元素

回答

相關問題