javascript - 如何将html插入svg元素

Question

元素已形成但好像存在于内部有这个标记

<g id="g-svg_el_obj921" style="top: 300px; left: 550px;">
  <circle r="95.12" fill="rgb(50, 149, 196)" class="some_class" id="svg_el_obj921" priority="4" position="300_550" cx="550" cy="300"></circle>
</g>

我需要在or元素中插入一些div元素，所以我这样做：gcircle

$('g').each(function(){   
    var feel_el = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
    var $feel_el = $(feel_el);

    $(this).append($feel_el);
});

元素已形成但似乎不存在......有人可以帮忙吗？

Answer 1

所有外来内容必须是<foreignObject>SVG 中元素的子元素。此外，一个<circle>元素不能渲染子元素，但一个<g>元素可以。

因此，您必须更改您的函数，以便它首先创建一个<foreignObject>元素，为该元素指定宽度和高度，然后创建一个<div>元素并使其成为该元素的子<foreignObject>元素，以便您创建看起来像这样的标记。

<g id="g-svg_el_obj921" style="top: 300px; left: 550px;">
  <circle r="95.12" fill="rgb(50, 149, 196)" class="some_class" id="svg_el_obj921" priority="4" position="300_550" cx="550" cy="300"></circle>
  <foreignObject width="100" height="100">
    <div>
    </div>
  </foreignObject>
</g>