2

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>
4

1 に答える 1

2

これは私のためにそれを修正します。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-11T10:57:53.720 に答える