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

回答

相关问题