Динамическое создание ссылок SVG в JavaScript

Я динамически создаю элементы SVG из JavaScript. Он отлично работает для визуальных объектов, таких как прямоугольник, но у меня возникают проблемы с созданием функционирующих xlinks. В приведенном ниже примере первый прямоугольник (который определен статически) работает правильно при нажатии, но два других (созданных в JavaScript) игнорируют щелчки... хотя проверка элементов в Chrome, кажется, показывает ту же структуру.

Я видел несколько похожих вопросов, но ни один из них не касался этого. Самое близкое, что я нашел, это [ добавление пространства имен изображений в svg через JS по-прежнему не показывает мне изображение ], но это не работает (как отмечено ниже). Моя цель — сделать это исключительно на JavaScript, не завися от JQuery или других библиотек.

<!-- Static - this rectangle draws and responds to click -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag">
    <a xlink:href="page2.html" id="buttonTemplate">
        <rect x="20" y="20" width="200" height="50" fill="red" class="linkRect"/>
    </a>
</svg>

<script>
    var svgElement = document.getElementById ("svgTag");

    // Dynamic attempt #1 - draws but doesn't respond to clicks
    var link = document.createElementNS("http://www.w3.org/2000/svg", "a");  // using http://www.w3.org/1999/xlink for NS prevents drawing
    link.setAttribute ("xlink:href", "page2.html");  // no improvement with setAttributeNS
    svgElement.appendChild(link);

    var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    box.setAttribute("x", 30); 
    box.setAttribute("y", 30);
    box.setAttribute("width", 200);
    box.setAttribute("height", 50);
    box.setAttribute("fill", "blue");
    link.appendChild(box);

    // Dynamic attempt #2 (also draws & doesn't respond) - per https://stackoverflow.com/questions/6893391
    box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    box.setAttribute("x", 40); 
    box.setAttribute("y", 40);
    box.setAttribute("width", 200);
    box.setAttribute("height", 50);
    box.setAttribute("fill", "green");
    box.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "page2.html");
    svgElement.appendChild(box);


javascript svg xlink
person user2837568    schedule 02.10.2013    source источник
comment
Согласно комментарию в ссылке, я также пробовал использовать setAttributeNS. Похоже, проблема заключалась в том, что я использовал неправильное пространство имен (svg вместо xlink).   -  person user2837568    schedule 02.10.2013

Ответы (1)


arrow_upward
8
arrow_downward

Только <a> может быть ссылкой, поэтому добавление атрибута xlink:href к элементу <rect> не будет иметь никакого эффекта.

Вам нужно использовать setAttributeNS, который, как вы говорите, не работает, но он работает для меня, поэтому, возможно, была какая-то другая проблема.

Этот пример работает для меня:

var svgElement = document.getElementById ("svgTag");

var link = document.createElementNS("http://www.w3.org/2000/svg", "a");
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "page2.html");
svgElement.appendChild(link);

var box = document.createElementNS("http://www.w3.org/2000/svg", "rect");
box.setAttribute("x", 30); 
box.setAttribute("y", 30);
box.setAttribute("width", 200);
box.setAttribute("height", 50);
box.setAttribute("fill", "blue");
link.appendChild(box);
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgTag">
</svg>

person Robert Longson    schedule 02.10.2013
comment
Спасибо, это действительно решило это. Похоже, проблема заключалась в том, что когда я ранее пробовал createElementNS, я использовал неправильное пространство имен: w3.org/2000 /svg вместо w3.org/2000/svg. Мое (неправильное) мнение заключалось в том, что элемент a является частью пространства имен sag, хотя теперь я вижу, что пространство имен должно было определяться на уровне атрибутов (xlink). - person user2837568; 02.10.2013