如何将html插入到svg元素中

element is formed but as if there exists within theHave this markup

元素形成,但好像存在于此标记内

<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>

i need to insert some div element into g or circle element, so i do this:

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

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

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

element is formed but seems like not exist... Can anybody help?

元素形成但似乎不存在......任何人都可以帮忙吗?

1 个解决方案

#1

All foreign content must be a child of a <foreignObject> element in SVG. Additionally a <circle> element can't have rendered children, but a <g> element can.

所有外部内容必须是SVG中元素的子元素。另外, 元素不能有渲染子元素,但元素可以。

So you'd have to change your function so that it firstly creates a <foreignObject> element, gives that element a width and height and then creates a <div> element and makes it a child of the <foreignObject> element, so that you create markup that looks like this.

因此,您必须更改函数,以便首先创建一个元素,为该元素提供宽度和高度,然后创建一个

元素并使其成为元素的子元素,以便您创建看起来像这样的标记。

<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>

#1