Форум

Максим Ученик · #1 (**permalink**) 12.11.2019, 10:25

Хочу сменить форму SVG элемента без библиотеки но не получается

Есть path:

<path d="M0,0 500,0 500,800 0,800" fill="red" id="fill"></path>

Хочу при клике на кнопку сменить его аttr на :

<path d="M0,0 500,0 Q470,350 500,700 L0,700" fill="red" id="fill"></path>

Моя попытка : https://codepen.io/topicstarter/pen/LYYBwgb

Помогите сменить attr please ...

не коммерческий вопрос и решения для себя

рони · #2 (**permalink**) 12.11.2019, 10:31

Максим Ученик,

fill.setAttribute('d','M0,0 500,0 Q470,350 500,700 L0,700');

Максим Ученик · #3 (**permalink**) 12.11.2019, 10:36

Сообщение от рони

Максим Ученик,

fill.setAttribute('d','M0,0 500,0 Q470,350 500,700 L0,700');

так работает - спасибо

а можно ли сделать так что бы можно было присвоить новый а при повторном click вернуть старый ?

рони · #4 (**permalink**) 12.11.2019, 10:44

Максим Ученик,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  button, svg{
  display: inline-block;
  vertical-align: top;
}

  </style>


</head>

<body>
<button id="btn">button</button>

<svg width="50%" viewBox="0 0 500 700">
  <path d="M0,0 500,0 500,800 0,800" fill="red" id="fill" data-d="M0,0 500,0 Q470,350 500,700 L0,700"></path>
</svg>
<script>
    btn.onclick = function(){
  var d = fill.dataset.d;
  fill.dataset.d = fill.getAttribute('d');
  fill.setAttribute('d', d);
}
  </script>
</body>
</html>

Максим Ученик · #5 (**permalink**) 12.11.2019, 10:51

Огромное спасибо ....именно то что надо

Форум

Справочник

Discord чат

Курсы javascript