0

それらをクリックすると、svgの正方形の色を変更するためにjavascriptで4つのボタンを取得したい

これまでのところ、次のコードがあります

<html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%"height="100%"version="1.1"
<svg xmlns="http://www.adobe.com/svg">
  <script type="text/ecmascript">
    <![CDATA[

function chooseColor1() {

document.getElementsById("mySqaure")[0].style.color = "green";


        }

        function chooseColor2() {

            document.getElementsById("mySqaure")[0].style.color = "pink";

        }

        function chooseColor3() {

            document.getElementsById("mySqaure")[0].style.color = "purple";

        }

        function chooseColor4() {

            document.getElementsById("mySqaure")[0].style.color = "blue";

        }



    ]]>
 </script>
 `<g
    id="firstGroup">
    <rect id = "mySquare" x="0" y="0" width="20" height="20"  fill="grey" stroke="black" stroke-width="2" />

  </g>

    <form onsubmit="return false">
       <input type="button" value="green" onclick="chooseColor1()"/>
        <input type="button" value="pink" onclick="chooseColor2()"/>
         <input type="button" value="purple" onclick="chooseColor3()"/>
          <input type="button" value="blue" onclick="chooseColor4()"/>
    </form>
</svg>

</html>
4

1 に答える 1

1

ボタンの機能が機能しない理由は、スペルミスが原因である可能性があります。関数では、ID「mySqaure」を持つ要素を参照していますが、要素の ID は実際には「mySquare」です。

タグが整形式に見えるのにボタンが表示されない理由はわかりませんが、g タグの直前に「`」文字があるように見えます (コードをこれにコピーしたときにこれが忍び込んだかどうかはわかりません)ページ）。

編集: 最初の SVG タグが適切に閉じられていません (最後に /> がありません)。

于 2012-04-10T09:28:29.207 に答える