Javascript 将子对象附加到SVG对象不会更新Vue中的SVG

我有一个SVG对象，当我单击它时，我希望一个矩形出现在那里。我可以让它在Vue之外工作，但不能使用Vue

Vue中的HTML/模板字符串

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="1285 579 475 220" preserveAspectRatio="xMidYMid meet">
<image width="2111" height="1219" xlink:href="./hogviltsgatan.png"></image>
  <g id="local" transform="scale(4)">
    <rect x="50" y="50" width="100" height="100" rx="10" />
  </g>

</svg>
<p id="coords">co-ordinates</p>

---

如果我将目标打印到控制台，我可以看到矩形已经附加。但是，它不会出现在我的浏览器中。svgPoint和createRect方法可以工作。同样，该代码在Vue之外运行良好。Vue似乎没有更新。如果我在模板字符串中硬编码一个rect，它会显示得很好。

使用rect的数据创建并操作一个对象数组

操纵对象

createRect: function(_id, _x, _y, _w, _h) {
    this.rects.push({id:_id, x:_x, y:_y, w:_w, h:_h});
}

使用vue方法创建SVG

<svg>
    <g v-for="rect in rects" :id="rect.id" />
        <rect :x="rect.x" :y="rect.x" :width="rect.w" :height="rect.h">
    </g>
</svg>

---

Typo:

let rect=document.createElements（this.svg，'rect'）

将

this.svg

替换为

this.NS

this.svg

是一个SVGSVGElement，将其用作名称空间将使其强制为字符串

“[object SVGSVGElement]”

，这是一个浏览器不知道的名称空间，并且作为svg内容无效（foreignObject中的表单除外），但无论如何，这不会创建SVGRectElement。这也非常有效！

createRect: function(_id, _x, _y, _w, _h) {
    this.rects.push({id:_id, x:_x, y:_y, w:_w, h:_h});
}

<svg>
    <g v-for="rect in rects" :id="rect.id" />
        <rect :x="rect.x" :y="rect.x" :width="rect.w" :height="rect.h">
    </g>
</svg>