从字符串创建 svg 元素

Question

我想检查 d3js 是否可以满足我的愿望，我需要知道如何从给定的字符串创建一个 svg 元素。

我的元素存储在数据库中。 它们是字符串，遵循 svg 规则，如下所示：

<desc>
  <Insert x='21' y='21'/>
  <Pins>
    <Pin Id='1' x='21' y='1' direction='up' />
    <Pin Id='2'  x='21' y='41' direction='down' />
  </Pins>
  <Properties>
    <Property Id='20010' x='0' y='21' angle='0'></Property>
  </Properties>
</desc>
<circle class='CDC300' cx='21' cy='21' r='20' fill='none'></circle>
<polyline class='CDC300' points='1 21 21 1 41 21' fill='none' />
<text id='20010' class='CDC400' text-anchor='end' x='-2' y='25' >#{BMK}</text>

在用这个字符串创建一个 svg 元素之前，我想添加一个 g-tag（组），我需要添加 transform='translate(some value of database)' . 好的，我希望我能用 d3 做得更好的最后一件事。

那么我该如何开始呢？ 我找到了大量示例和教程，但没有一个将 svg 元素存储在数据库中，只有一些坐标或非常简单的数据来放置和设置 svg 样式。

Answer 1

对于现代浏览器^*，您可以使用html() 将整个字符串附加到您的<g> 元素中。

这是一个基本的演示。我们首先创建 <g> 元素，然后将其转换为您想要的值，最后我们使用数据库中的字符串：

const string = `<desc>
  <Insert x='21' y='21'></Insert>
  <Pins>
    <Pin Id='1' x='21' y='1' direction='up'/>
    <Pin Id='2'  x='21' y='41' direction='down'/>
  </Pins>
  <Properties>
    <Property Id='20010' x='0' y='21' angle='0'></Property>
  </Properties>
</desc>
<circle class='CDC300' cx='21' cy='21' r='20' fill='blue'></circle>
<polyline class='CDC300' points='1 21 21 1 41 21' fill='red' />
<text id='20010' class='CDC400' text-anchor='end' x='-2' y='25' >#{BMK}</text>`;

const svg = d3.select("svg");

const g = svg.append("g").attr("transform", "translate(100,50)");

g.html(string);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

此外，要使其正常工作，您必须正确关闭元素，例如：

<Insert x='21' y='21'></Insert>

---

^* 因为html 在内部使用innerHTML，所以这不适用于旧浏览器中的 SVG 元素。