存储和更新 svg 文档

Question

我使用SVG 来绘制层级结构——比如人物的家谱树。

看起来像这样

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="27" width="81" y="54.283333" x="84.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <rect id="svg_4" height="27" width="81" y="54.283333" x="183.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <rect id="svg_5" height="27" width="81" y="130.283333" x="133.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <rect id="svg_6" height="27" width="81" y="130.283333" x="299.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <line stroke-linecap="null" stroke-linejoin="null" id="svg_7" y2="65.283333" x2="185.5" y1="65.283333" x1="165.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <line stroke-linecap="null" stroke-linejoin="null" id="svg_8" y2="129.283333" x2="175.5" y1="63.283333" x1="175.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <line stroke-linecap="null" stroke-linejoin="null" id="svg_9" y2="140.283333" x2="215.5" y1="140.283333" x1="300.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_10" y="73.283333" x="87.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">mother</text>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_11" y="75.283333" x="193.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">father</text>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_12" y="150.283333" x="142.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">player</text>
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_13" y="150.283333" x="317.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">npc1</text>
 </g>
</svg>

我想根据玩家或其他实体对世界所做的更改不时更新此 SVG。因此，理想情况下，我希望能够将其存储在某处并在发生更改时进行更新。

我的问题是这样做的正确方法是什么？将 SVG 存储为文件，解析并更新 DOM（使用 DOMIMplementation 和 Element 等），或者例如将其存储在一些 XML 数据库中并使用查询或其他方式进行更新？

Answer 1

您可以使用 XML 解析器将其作为通用 XML 文件读取。然后修改它。

或者您可以使用 SVG 实现，例如 Batik，它可以让您访问 SVG DOM 提供的功能。