Javascript SVG圆圈在a中时不显示<；a>；标签

我已经编写了一个javascript代码来帮助我创建交互式地图。我单击地图并单击按钮，然后它将一个带有href的a标记写入地图的svg标记，在该标记中添加一个圆圈。但是，圆圈此时不出现

但是如果我使用谷歌Chrome的开发工具，删除这个圆圈，然后像之前一样重写这个圆圈，它就会工作

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，所以我不知道问题出在哪里

圆圈上的

cx

和

cy

属性是中心x-y坐标。这意味着您的圆的中心是SVG元素左上角的

[343303]

。SVG之外的任何内容都将不可见，因此如果这些坐标大于SVG的宽度或高度，则圆圈将显示在SVG边界之外

SVG没有任何高度宽度标注，也没有viewBox，这意味着圆的坐标位于viewBox/width/height之外

您应该尝试设置SVG的宽度/高度或视图框（例如，以

viewBox=“0 0 100 100”

的格式），并设置视图框内圆圈的

cx

和

cy

比如：

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

也许能奏效

Edit:正如Lee Taylor在上面所说的，虽然

标记也是一个HTML元素，但在SVG中它具有不同的含义，并且应该与其他SVG元素一样创建。因此，在

document.body

中创建

a

标记时，应该：

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

对于SVG，您需要将

var atag=document.createElement（'a'）

更改为：

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

---

您错误地混合了HTML和SVG。尽管svg中有一个

a

标记，但它与Mozilla Firefox本教程中使用的HTML

a

标记不同。在这个例子中，他们像我一样使用a标记……是的，但它的使用方式不同，您不能只使用html

document.createElement

，因为这仅用于html项目。根据@Oliver的回答，您需要使用

document.createElements

。我实际上放了一个视口！这是我关于Stackoverflow的第一个问题，所以我不知道是否必须简化代码，但我会编辑它。当我在开发工具中删除并重写同一行时，圆圈在正确的位置可见，因此看起来很好……对不起，这是指

viewBox

，而不是

viewport

-编辑以反映我混淆了术语：）