изменение цвета круга SVG с помощью кнопки в HTML - PullRequest
Новая
       1

изменение цвета круга SVG с помощью кнопки в HTML

0 голосов
/ 21 февраля 2019

, поэтому я хотел сделать круг в HTML, используя SVG и изменив его цвет с синего на красный, но у меня возникли проблемы при попытке создать функцию для изменения цвета.это мой сценарий: 

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

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Попробуйте это 

<!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>
0 голосов
/ 21 февраля 2019

Должно быть так.Также 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...