Question

所以我想使用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>

Answer 1

应该是这样。此外，id必须位于circle中。

function change() { 
  document.getElementById('dayereh').style.fill = "red";
}

.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;
}

<svg  width="1370" height="1070">
  <circle id="dayereh" 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>

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

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

2 个答案: