javascript - 将 svg 字符串元素插入现有 svg 标签

Question

我有一个现有的 <svg></svg> ，我想附加一个 svg元素，它是一个字符串。 示例:

var svg_string = '<g><text x="100" y="100">Hello</text></g>';

d3.select('svg').append(svg_string); // or something like that

我可以这样做吗？不使用d3.xml ，因为我不想从某个地方加载 svg 文件。

我已经通过这样做尝试使用 jQuery。

$('svg').append('<svg><g><text></text></g></svg>')

但是我想知道是否有更好的方法，无需附加 svg 标签

更新:抱歉，我没说清楚。

我想附加 svg_string进入像 svg 元素

<svg><g id="test"></g></svg>

$('#test').append(svg_string)

谢谢。

Answer 1

正确的做法是显式声明每个属性或节点。

d3.select('svg').append("g").append("text").attr("x",100).attr("y",100).text("Hello");

如果您确实想添加 html 字符串，请使用:

d3.select('svg').html("<g><text x=\"100\" y=\"100\">Hello</text></g>");

示例:https://jsfiddle.net/ero38b49/

编辑:基于问题更新:

如果您想添加字符串str里面<g>与 id “测试”

  var str = "<g><text x=\"100\" y=\"100\">Hello</text></g>";
    d3.select('#test').html(str);

这会给你:

<svg>
   <g id="test">
      <g><text y="100" x="100">Hello</text>
      </g>
   </g>
</svg>

示例:https://jsfiddle.net/ero38b49/1/

如果您愿意append字符串str至<svg> (作为 <g> 的兄弟， id “测试”)

d3.select("svg").html(d3.select("svg").html() + str);

这会给你:

<svg>
  <g id="test"/>
  <g><text y="100" x="100">Hello</text>
  </g>
</svg>

示例:https://jsfiddle.net/ero38b49/2/