我使用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 数据库中并使用查询或其他东西进行更新？
您可以使用 XML
解析器将其作为通用 XML 文件读取。然后修改它。
或者您可以使用 SVG 实现，例如 Batik，它将使您能够访问 SVG DOM 提供的功能。