Javascript 使用HTML中的按钮更改SVG圆圈的颜色_Javascript_Html_Css_Svg

Javascript 使用HTML中的按钮更改SVG圆圈的颜色

javascript html css svg

Javascript 使用HTML中的按钮更改SVG圆圈的颜色,javascript,html,css,svg,Javascript,Html,Css,Svg,所以我想用SVG在HTML中画一个圆圈，并将其颜色从蓝色改为红色，但在尝试创建一个用于更改颜色的函数时遇到了问题。这是我的剧本： <!DOCTYPE html> <html> <head> <style> .button { background-color: rgb(209, 16, 16); border: none; color: rgb(255, 255,

所以我想用SVG在HTML中画一个圆圈，并将其颜色从蓝色改为红色，但在尝试创建一个用于更改颜色的函数时遇到了问题。这是我的剧本：

<!DOCTYPE html>
<html>
<head>
    <style>
        .button {
          background-color: rgb(209, 16, 16);
          border: none;
          color: rgb(255, 255, 255);
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 4px 2px;
          cursor: pointer;
        }
    </style>



</head>
<body>
        <script  >
            function change() { getElementById('dayereh').css.color= 'red'} 

        </script>
    <svg id="dayereh" width="1370" height="1070">
        <circle cx="500" cy="500" r="400" stroke="black" stroke-width="30" fill="blue" />

     </svg> 
<button  class="button" id="btn-test1" onclick="change()">change color</button>
</body>
</html>


.按钮{
背景色：rgb（209,16,16）；
边界：无；
颜色：rgb（255、255、255）；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
利润：4倍2倍；
光标：指针；
}
函数change（）{getElementById（'dayereh'）.css.color='red'}
变色

应该是这样的。另外，

id

必须在

圆圈中

函数更改（）{
document.getElementById（'dayereh'）.style.fill=“红色”；
}
。按钮{
背景色：rgb（209,16,16）；
边界：无；
颜色：rgb（255、255、255）；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
利润：4倍2倍；
光标：指针；
}

更改颜色
试试这个
<!DOCTYPE html>
<html>
 <head>
   <style>
     .button {
       background-color: rgb(209, 16, 16);
       border: none;
       color: rgb(255, 255, 255);
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 20px;
       margin: 4px 2px;
       cursor: pointer;
     }
   </style>
</head>
<body>
 <script>
  function change() {
    document.querySelector('#dayereh circle').setAttribute("fill","0000FF");
  } 
 </script>
 <svg id="dayereh" width="1370" height="1070">
   <circle cx="500" cy="500" r="400" stroke="black" stroke-width="30" fill="blue" />
 </svg> 
 <button  class="button" id="btn-test1" onclick="change()">change color</button>
</body>
</html>


.按钮{
背景色：rgb（209,16,16）；
边界：无；
颜色：rgb（255、255、255）；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：20px；
利润：4倍2倍；
光标：指针；
}
函数更改（）{
document.querySelector（“#dayereh circle”）.setAttribute（“fill”，“0000FF”）；
} 
变色
欢迎使用堆栈溢出！你遇到了什么问题？请记住分享您遇到的任何错误消息。谢谢，但我不想使用query。（顺便说一句）@dokukancavas抱歉，我不知道我是如何熟悉这一点的site@AliAgharazi选择一个你认为是解决问题最好的答案。要将答案标记为已接受，请单击答案旁边的复选标记，将其从灰显切换为已填写。