SVG動畫翻譯

我嘗試使用SVG製作下一個和上一個按鈕SVG動畫翻譯

有正方形和三角形。當你看到方形的時候，如果你點擊下一個，它應該變成三角形。當你看到三角形時，如果你點擊上一個，它應該變回正方形。

如果我點擊下一個然後上一個，它完美的作品。但是，當我嘗試再次點擊下一個。它不起作用。

這裏是我的SVG代碼

<!DOCTYPE HTML> 
<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="300" height="300"> 
    <text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" > 
    Prev 
    </text> 
    <text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" > 
    Next 
    </text> 
    <g> 
    <path id="triangle" d="M450 0 L375 200 L525 200 Z" 
     stroke="#000000" stroke-width="3" 
     fill="white"> 
     <animateColor attributeName="fill" 
        to="rgb(0,255,0)" begin="mouseover" dur="1s" 
        additive="sum" fill="freeze"/> 
     <animateColor attributeName="fill" 
        to="rgb(255,255,255)" begin="mouseout" dur="1s" 
        additive="sum" fill="freeze"/> 

    </path> 
    <path id="square" d="M75 0 L225 0 L225 200 L75 200 Z" 
     stroke="#000000" stroke-width="3" 
     fill="white"> 
     <animateColor attributeName="fill" 
        to="rgb(255,0,0)" begin="mouseover" dur="1s" 
        additive="sum" fill="freeze"/> 
     <animateColor attributeName="fill" 
        to="rgb(255,255,255)" begin="mouseout" dur="1s" 
        additive="sum" fill="freeze"/> 

    </path> 
    <animateTransform attributeName="transform" attributeType="XML" 
        type="translate" by="-300,0" begin="next.click" dur="1s" 
        keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" 
        additive="sum" accumulate="sum" fill="freeze"/> 
    <animateTransform attributeName="transform" attributeType="XML" 
        type="translate" by="300,0" begin="previous.click" dur="1s" 
        keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" 
        additive="sum" accumulate="sum" fill="freeze"/> 
</g> 

</body> 
</html>

來源

2013-04-11 user2269436

這修復它爲我。請注意，您應該避免使用animateColor並使用animate，因爲animateColor在SVG規範中已棄用。

<!DOCTYPE HTML> 
<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="300" height="300"> 
    <text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" > 
    Prev 
    </text> 
    <text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" > 
    Next 
    </text> 
    <g> 
    <path id="triangle" d="M450 0 L375 200 L525 200 Z" 
     stroke="#000000" stroke-width="3" 
     fill="white"> 
     <animate attributeName="fill" 
        to="rgb(0,255,0)" begin="mouseover" dur="1s" 
        additive="sum" fill="freeze"/> 
     <animate attributeName="fill" 
        to="rgb(255,255,255)" begin="mouseout" dur="1s" 
        additive="sum" fill="freeze"/> 

    </path> 
    <path id="square" d="M75 0 L225 0 L225 200 L75 200 Z" 
     stroke="#000000" stroke-width="3" 
     fill="white"> 
     <animate attributeName="fill" 
        to="rgb(255,0,0)" begin="mouseover" dur="1s" 
        additive="sum" fill="freeze"/> 
     <animate attributeName="fill" 
        to="rgb(255,255,255)" begin="mouseout" dur="1s" 
        additive="sum" fill="freeze"/> 

    </path> 

    <animateTransform attributeName="transform" attributeType="XML" 
        type="translate" from="0,0" by="-300,0" begin="next.click" dur="1s" 
        keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" 
        fill="freeze"/> 
    <animateTransform attributeName="transform" attributeType="XML" 
        type="translate" from="-300,0" by="300,0" begin="previous.click" dur="1s" 
        keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" 
        fill="freeze"/> 
</g> 

</body> 
</html>

來源

2013-04-11 10:57:53

SVG動畫翻譯

回答

相關問題