在JavaScript中动态创建SVG链接 [英] Dynamic creation of SVG links in JavaScript

问题描述

我正在从JavaScript动态创建SVG元素。它适用于像矩形这样的可视对象，但是我在生成正常运行的xlink时遇到了麻烦。在下面的示例中，第一个矩形（静态定义）在单击时正常工作，但其他两个（在JavaScript中创建）忽略了点击...即使检查Chrome中的元素似乎显示相同的结构。

I am dynamically creating SVG elements from JavaScript. It's working fine for visual objects like a rectangle, but I'm having trouble producing functioning xlinks. In the example below the first rectangle (which is statically defined) works correctly when clicked on, but the other two (created in JavaScript) ignore clicks... even though inspecting the elements in Chrome seems to show the same structure.

我看到过多个类似的问题，但没有一个能够解决这个问题。我找到的最接近的是[通过JS在svg中添加图像命名空间仍然没有向我显示图片]但是这不起作用（如如下所述）。我的目标是完全使用JavaScript，而不依赖于JQuery或其他库。

I've seen multiple similar questions come up, but none that exactly address this. The closest I found was [ adding image namespace in svg through JS still doesn't show me the picture ] but that's not working (as noted below). My goal is to do this purely in JavaScript, without depending on JQuery or other libraries.

<!-- 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);

推荐答案

只有< a> 可以是链接，因此将xlink：href属性添加到< rect> 元素将无效。

Only an <a> can be a link so adding an xlink:href attribute to a <rect> element will have no effect.

您需要使用setAttributeNS，您认为它不起作用，但它对我有用，所以可能还有其他一些问题。

You need to use setAttributeNS which you say doesn't work but it does for me so perhaps there was some other issue.

此示例适用于我：

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>

这篇关于在JavaScript中动态创建SVG链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！