0

我想在 javascript 中获取 4 个按钮，以便在单击它们时更改 svg 中正方形的颜色

到目前为止，我有以下代码

<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 回答