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

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

所以你必须改变你的函数，以便它首先创建一个<foreignObject>元素，给该元素一个宽度和高度，然后创建一个<div>元素并使其成为<foreignObject>的子元素{1}}元素，以便您创建看起来像这样的标记。

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

如何将html插入svg元素

1 个答案: