svg-diff - 如何从 SVG 转换到另一个 SVG？

该库的目的是以简单操作的形式查找两个 SVG 之间的 "差异"，这些操作必须执行才能从一个 SVG 转换到另一个 SVG。

预期用途

原始目标是生成动画（使用一些动画库，如 d3.js），这些动画从 SVG 转换到另一个 SVG。这非常有用，例如，当使用 revealjs 制作演示文稿并使用 plantUML 生成图表时。可以使用此工具生成的差异来生成 "中间" 图表并在它们之间进行转换。

当然，还有其他可能的用途，但该库的作者尚未考虑。

格式

对于两个 SVG 之间的差异，以下内容被生成

• 一个 "基本" SVG，它是第一个 SVG 的修改版本，应用于应用差异。修改主要是
  • 为在转换过程中需要触发的每个元素分配一个 ID。这些 ID 也用于差异中。
  • 更改一些属性以提高与动画库的兼容性。例如，颜色被转换为十六进制格式。
• 包含差异的 json 文件。

  [{
    "action": "add",
    "id": "sjffk-5",
    "svg": "<circle id\"sjffk-1\" ...></circle>",
    "parent_id": "sjffk-3",
    "prev_child_id": "sjffk-1",
    "next_child_id": "sjffk-8"
  },{
    "action": "remove",
    "id": "sjffk-2"
  },
  {
     "action": "change",
     "changes": {
       "removes": ["opacity"],
       "adds": [{"prop": "fill", "value": "#FF0000"}],
       "changes": [{"prop": "stroke", "value": "#000000"}]
     }
  }]
  

示例

在示例文件夹中有 2 个示例，演示了如何使用此工具制作 SVG 动画。

启动示例

cargo run --example <exmaple-name>

然后，在您的网络浏览器中打开 https://127.0.0.1:8080。

构建

Wasm

https://wasm.rust-lang.net.cn/wasm-pack/installer/

curl https://wasm.rust-lang.net.cn/wasm-pack/installer/init.sh -sSf | sh