SVG 圆圈在<a>标签</a>中不出现

Question

我编写了一个 javascript 代码来帮助我创建交互式地图。 我在地图上点击，然后点击按钮，然后将其与A HREF写一个标签到地图的SVG标签，这个标签添加一个圆圈。 然而，这个圆圈此刻并没有出现。

在这里你可以看到界面的图像

但是如果我用谷歌浏览器的开发工具，把这个圈删掉，再像刚才一样改写这个圈，就可以了。

var svgmap = document.getElementById("mapsvg");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
var atag = document.createElement('a');
atag.setAttribute("href",url);
circle.setAttribute("cx",posX);
circle.setAttribute("cy",posY);
circle.setAttribute("r",4);
circle.setAttribute("stroke","black")
svgmap.appendChild(atag);
atag.appendChild(circle);

然后添加：

<svg id = "mapsvg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  viewBox="0 0 700 700" xml:space="preserve">
<a href="www.stackoverflow.com" target="_blank">
    <circle cx="343" cy="303" r="4" stroke="black" stroke-width="2" fill="green" class="dot">
    </circle>
</a>
</svg>

看起来是“刷新”的问题。 我刚刚学习了 HTML 和 Javascript，所以我不知道问题出在哪里！

Answer 1

circle上的cx和cy属性是中心 xy 坐标。 这意味着圆的中心位于 SVG 元素左上角的[343, 303]处。 SVG 之外的任何内容都将不可见，因此如果这些坐标大于 SVG 的宽度或高度，则圆圈将出现在 SVG 边界之外。

您的 SVG 没有任何高度尺寸的宽度，也没有 viewBox，这意味着圆的坐标远在 viewBox/width/height 之外。

您应该尝试为 SVG 或 viewBox 设置宽度/高度（例如，格式为viewBox ="0 0 100 100" ）并在 viewBox 中设置圆的cx和cy 。

就像是：

svgmap.setAttribute("width", (posX * 2));
svgmap.setAttribute("height", (posY * 2));
svgmap.setAttribute("viewBox", "0 0 " + (posX * 2) + " " + (posY * 2));

可能会成功。

编辑：正如 Lee Taylor 上面所说，虽然<a>标签也是一个 HTML 元素，但在 SVG 中它具有不同的含义，应该与其他 SVG 元素一样创建。 因此，虽然创建a内标签document.body是：

document.body.appendChild(document.createElement('a'));

对于 SVG，您需要将var atag = document.createElement('a')更改为：

var atag = document.createElementNS('http://www.w3.org/2000/svg', 'a');