SVG animation 번역

SVG로 다음 및 이전 버튼을 만들려고합니다SVG animation 번역

사각형과 삼각형이 있습니다. 사각형을 볼 때 다음을 클릭하면 삼각형으로 바뀌어야합니다. 삼각형을 볼 때 이전을 클릭하면 다시 사각형으로 바뀝니다.

다음을 클릭하고 이전을 클릭하면 완벽하게 작동합니다. 그러나 다음을 다시 클릭하려고 할 때. 그것은 작동하지 않습니다.

여기 내 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는 SVG 사양에서 더 이상 사용되지 않으므로 animateColor를 피하고 대신 animate를 사용해야합니다.

<!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 animation 번역

답변

관련 문제