Какой namespace валиден для xml-атрибутов внутри svg?

242

11 апреля 2018, 08:32

Задача – начать анимацию svg через js. Моя (не)реализация – создаём dom-узел с тегом animate, ставим необходимые атрибуты, вставляем в конец svg. Проблема – при выполнении

elem.setAttributeNS('http://www.w3.org/2000/xmlns', 'xmlns:xlink', 'http://www.w3.org/1999/xlink')

(а также аналогичной установки любого другого атрибута) я ловлю ошибку:

Uncaught DOMException: Failed to execute 'setAttributeNS' on 'Element': 'www.w3.org/2000/xmlns' is an invalid namespace for attributes.

Если попробовать использовать обычные .setAttribute() и .createElement(), то анимация просто не работает без каких либо ошибок.

Вопрос: какой namespace валиден для xml-атрибутов внутри svg?

Посмотреть на ситуацию

Answer 1

Для SVG, как для языка семейства XML валидным namespace было и остается объявление :

"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

Если вы указали в шапке svg файла эти строки (как в вашем примере), то нет необходимости указывать их в каждой строчке JS для генерации любых элементов SVG Проще записать их один раз в переменные и потом многократно использовать

var svgNS = "http://www.w3.org/2000/svg"; var xlinkNS = "http://www.w3.org/1999/xlink";

Создание окружности:

var newCircle = document.createElementNS(svgNS,"circle");

создание атрибутов окружности:

newCircle.setAttributeNS(null,"cx",100); newCircle.setAttributeNS(null,"cy",100); newCircle.setAttributeNS(null,"r",20);

Ниже пример создания и закраски окружности случайным цветом:

var red = Math.round(Math.random() * 255); var green = Math.round(Math.random() * 255); var blue = Math.round(Math.random() * 255); newCircle.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")"); document.getElementById("firstCircle").appendChild(newCircle);

Окружности появляются в случайных местах, случайного размера и цвета после клика Полный код срипта + SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400"> 
  <script type="text/ecmascript"><![CDATA[ 
    var svgNS = "http://www.w3.org/2000/svg"; 
    var xlinkNS = "http://www.w3.org/1999/xlink"; 
    function createCircle() { 
      var newCircle = document.createElementNS(svgNS,"circle"); 
      newCircle.setAttributeNS(null,"cx",Math.random() * 100+250);	 
      newCircle.setAttributeNS(null,"cy",Math.random() * 100+100);		 
      newCircle.setAttributeNS(null,"r",Math.random() * 100);		 
      newCircle.setAttributeNS(null,"stroke",Math.random() * 100);	 
      newCircle.setAttributeNS(null,"fill-opacity",Math.random());		 
      var red = Math.round(Math.random() * 255); 
      var green = Math.round(Math.random() * 255); 
      var blue = Math.round(Math.random() * 255); 
      newCircle.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")"); 
      document.getElementById("firstCircle").appendChild(newCircle); 
    }	 
      
  ]]></script> 
    <g id="firstCircle" onclick="createCircle()">  
  <rect x="50" y="20" width="150" height="30" rx="10" fill="crimson"  /> 
    <text x="64" y="40" fill="white"  font-size="16px">Create a new circle.</text> 
     </g> 
</svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Замена стандартной метки на свою в Яндекс.Картах

Всем приветЕсть Карта, метки выставляются, но как заменить стандартные метки на свои? Если координаты меток берутся из json файла, а в самой...

276

javascript

Пропало меню в Open Cart3

На сайте было настроено меню (шаблон Volga): горизонтальное и вертикальное выпадающееВот так это выглядело:https://prnt

190

javascript

Как сделать скрипт для проверки, что включен Caps Lock и включена русская раскладка

Нужен скрипт, который будет проверять инпут для ввода пароля и в случае, если человек пишет с включенным Caps Lock или на русской раскладке выводить...

212

javascript

HTML5 History API. Как добавить запись [дубликат]

На данный вопрос уже ответили:

219