Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.11.2019, 10:25
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Как сменить у 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 ...

не коммерческий вопрос и решения для себя
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2019, 10:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Максим Ученик,
fill.setAttribute('d','M0,0 500,0 Q470,350 500,700 L0,700');
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2019, 10:36
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

Сообщение от рони Посмотреть сообщение
Максим Ученик,
fill.setAttribute('d','M0,0 500,0 Q470,350 500,700 L0,700');
так работает - спасибо

а можно ли сделать так что бы можно было присвоить новый а при повторном click вернуть старый ?
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2019, 10:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Максим Ученик,
<!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
Аватар для Максим Ученик
Интересующийся
Отправить личное сообщение для Максим Ученик Посмотреть профиль Найти все сообщения от Максим Ученик
 
Регистрация: 13.08.2019
Сообщений: 25

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить заливку SVG user_name Элементы интерфейса 2 21.04.2015 23:36
Как сделать так, чтобы значение переменной не возвращалось на исходное значение? E}|{uk Общие вопросы Javascript 1 21.12.2014 15:26
Присвоить value значение или как? qazibum Элементы интерфейса 17 30.08.2012 19:50
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 15:25