从字符串创建 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 标签（组），我需要添加转换 = 翻译（数据库的某个值）'。好的，最后一件事我希望我可以用 d3 做得更好。

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