如何用SMIL動畫（不是CSS）自畫一條線

我想知道如何在<animate> SMIL標籤內的SVG this CSS self-drawing effect上完成。我不會使用css動畫，而是使用類似於此的：如何用SMIL動畫（不是CSS）自畫一條線

<line fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/> 
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="#BBBBBB" dur="0.5s" begin="0" />

但是，我無法使其工作。什麼是正確的方法？

來源

2016-04-23 ohmmho

除了通過id訪問行和沒有id的行以外，動畫沒有多大錯誤。

我也增加了持續時間，並改變了顏色，使其更清晰的動畫。

<svg> 
 
    <line id="first-line" fill="none" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="19.69" y1="75.671" x2="19.69" y2="175.79"/> 
 
<animate xlink:href="#first-line" attributeName="stroke" from="transparent" to="red" dur="2.5s" begin="0" /> 
 
    </svg>

來源

2016-04-24 07:24:24

是的，謝謝你，這是ID事情:)我想它總是幫助在代碼中的第二次看當你在它前面花了太多的時間。 – ohmmho

如何用SMIL動畫（不是CSS）自畫一條線

回答

相關問題