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文件。然后修改它。

或者您可以使用诸如Batik之类的SVG实现，通过该实现，您可以访问SVG DOM提供的功能。

存储并更新svg文档

1 个答案: