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);＆＃34;测试＆＃34;

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

这会给你：

append

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

如果您希望将str字符串<svg>添加到<g>（作为id的兄弟d3.select("svg").html(d3.select("svg").html() + str);＆＃34;测试＆＃34;）< / p>

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

这会给你：

Parent 
    Core (generate core jar)
            web-service (generate service jar)
                  web-app(generate WAR)
    ..

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

Answer 2

<svg><g id = 'svg-element'></g></svg>
<script>
  var svg_string = '<g><text x="100" y="100">Hello</text></g>';
  document.getElementById('svg-element').parentNode.innerHTML += svg_string;
</script>

将svg string元素插入现有的svg标记中

2 个答案: