如何将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>

我需要插入一些div元素g或circle元素,所以我这样做:

$('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>