admin管理员组

文章数量:1355542

so i wanted to make a circle in HTML using SVGs and changing its color from blue to red but i had problems while trying to make a function for changing the color. this is my script:

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

so i wanted to make a circle in HTML using SVGs and changing its color from blue to red but i had problems while trying to make a function for changing the color. this is my script:

<!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>
  • javascript
  • html
  • css
  • svg
Share Improve this question asked Feb 21, 2019 at 19:23 Ali AgharaziAli Agharazi 691 gold badge2 silver badges6 bronze badges 1
  • Wele to Stack Overflow! What problem are you running into? Remember to share any error messages you encounter. – Mathyn Commented Feb 21, 2019 at 19:47
Add a ment  | 

2 Answers 2

Reset to default 6

Should be like this. Also The id must be in the 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>

Try this

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

本文标签： javascriptchanging the color of an SVG circle using a button in HTMLStack Overflow

版权声明：本文标题：javascript - changing the color of an SVG circle using a button in HTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744003886a2574349.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。