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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

dgk*_*nca 6

应该是这样的。也id必须在circle.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，8 月前
查看次数：	2392 次
最近记录：	6 年，8 月前