Как сменить у SVG значение аттрибута d ?
Хочу сменить форму 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 ... не коммерческий вопрос и решения для себя |
Максим Ученик,
fill.setAttribute('d','M0,0 500,0 Q470,350 500,700 L0,700');
|
Цитата:
а можно ли сделать так что бы можно было присвоить новый а при повторном click вернуть старый ? |
Максим Ученик,
<!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>
|
Огромное спасибо ....именно то что надо
|
| Часовой пояс GMT +3, время: 16:21. |