Как создать <use> в <svg> через javascript?

335
18 июля 2017, 21:19

Помогите пожалуйста. Нужно добавить елемент <use xlink:href="#myID" x="0" y="100"></use> в <svg> средствами JavaScript.

Проблема в том, что сам элемент добавляется все нормально и все свойства все ок, но не отображается.

Элемент который копируется - xlink:href="#myID" уже присутствует в html (но тоже добавляется динамически), т.е. элемент <use> добавляется, после, (вроде все правильно), но не отображается.

Проверял - вставил строку <use xlink:href="#myID" x="0" y="100"> прямо в код-html, но в отладчике в браузере и все нормально отобразилось.

И вот стоят две строки абсолютно одинаковые, но по одной элемент отображается, а по другой нет. Может как-то вставлять фрагментом кода-html, а не через: 

copy = document.createElementNS("http://www.w3.org/2000/svg",'use');
        copy.setAttribute('xlink:href','#myID');
        copy.setAttribute('x',0);
        copy.setAttribute('y',100);
        svg.insertBefore(сopy, firstChild);
Answer 1

Вот пример добавления элемента line и use связанного с ним. И обе добавляются динамически:

var  svgns = "http://www.w3.org/2000/svg"; 
    var  xlinkns = "http://www.w3.org/1999/xlink"; 
 
    var aLine = document.createElementNS(svgns, 'line'); 
        aLine.setAttribute('x1', 48.09); 
        aLine.setAttribute('y1', 41.694); 
        aLine.setAttribute('x2', 107.924); 
        aLine.setAttribute('y2', 41.694); 
        aLine.setAttribute('stroke', '#191199'); 
        aLine.setAttribute('stroke-width', 2); 
        aLine.setAttribute('id', 'MidCLine1'); 
        aLine.setAttribute('stroke-miterlimit', 10); 
        aLine.setAttribute('fill', 'none'); 
    var  g = document.getElementById("ledgerlines"); 
    g.appendChild(aLine); 
 
    var  use = document.createElementNS(svgns, "use"); 
    use.setAttributeNS(xlinkns, "href", "#MidCLine1"); 
    use.setAttribute("x", "10");  // offset = y+10 
    use.setAttribute("y", "10"); 
 
    g.appendChild(use);
<svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 y="0px" width="323.333px" height="55.333px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333" 
 xml:space="preserve"> 
<g id="ledgerlines"> 
   
</g> 
</svg>

READ ALSO
Найти дочерний элемент по data-attr (jQuery)
javascript

Найти дочерний элемент по data-attr (jQuery)

Всем приветЕсть следующий блок со всеми элементами с css display: none:

 391
saveAs работает только 1 раз
javascript

saveAs работает только 1 раз

Нужна функция для сохранения данных в файл, решил использовать библиотеку https://cdnrawgit

 356
AJAX.Добавление товаров в корзину
javascript

AJAX.Добавление товаров в корзину

Есть код страницы с товарами:

 382
Исправление добавленного задания в todo list vue.js
javascript

Исправление добавленного задания в todo list vue.js

Надо сделать так, чтобы при изменении в input'е (который появляется при клике на сам таск) изменялся сам таск и изменялся в localStorageВ моём случае...

 468