2

Помогите пожалуйста. Нужно добавить елемент <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);
3
  • можно весь код вашей страницы? 17 июл 2017 в 17:11
  • Нужен пример в виде сниппета.
    – Qwertiy
    17 июл 2017 в 17:54
  • Спасибо за правильный код. Дело было в одной строке - не правильно добавлял атрибут элементу. copy.setAttribute('xlink:href','#myID'); Нужно было прописать так: copy.setAttributeNS("w3.org/1999/xlink", "href", "#myID"); Спасибо еще раз. Вопрос решен. :-) 18 июл 2017 в 2:54

1 ответ 1

4

Вот пример добавления элемента 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>

1
  • Спасибо за правильный код. Дело было в одной строке - не правильно добавлял атрибут элементу. copy.setAttribute('xlink:href','#myID'); Нужно было прописать так: copy.setAttributeNS("w3.org/1999/xlink", "href", "#myID"); Спасибо еще раз. Вопрос решен. :-) 18 июл 2017 в 2:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.