使用 SVG 实现图片局部可点击跳转的效果。

各种尝试后，目前可行的方法是：

1. 使用亿图的桌面端画图，导出 SVG（使用「导出选中的图形」这个功能）
2. 将 SVG 文件放到网盘的 Work/Diagrams 目录中，注意命名上用 小写加连字符（如 mysql-architecture.svg）
3. 如果 SVG 文件中有文字需要链接到 wiki 条目，即 想实现点击 SVG 图片某一部分可跳转的能力 时，新建一个 JSON 配置文件（如 mysql-architecture.json），在里面的 links 字段中写对应关系，如：

   {
       "links": {
           "Server 层": "MySQL"
       }
   }

4. 运行目录下的 transfer.py 程序，会自动将文件转为 tid 文件并复制到 TiddlyWiki 目录下的 tiddlers/diagrams 目录中
5. 重启 TW Server 使新的 tid 文件生效
6. 在想包含这个 SVG 图形的 tiddler 中，使用 transclude 将 SVG tiddler 包裹进来。例子看 MySQL

转换脚本 transfer.py 做的事情有：

1. 将 SVG 文档其中的 <style> 中的 CDATA 去掉。CDATA 这段对于单独一个 SVG 文件是合适的；但是 SVG in HTML 时，浏览器不认这段 CDATA，因此去掉 CDATA 后使其成为 HTML 中的 CSS style（不确定 SVG 的样式跟 HTML 中的 CSS 有无差异性）
2. 如果该 SVG 有对应的 JSON 配置文件，获取其中的文字与链接对应关系。再遍历 SVG 中的节点，如果有找到相应的文本，修改为 TW 的 [[Text|Link]] 格式（注意 TW 5.1.22 及之前的版本在这里有 bug，tid 渲染时会无法显示这些文字）
3. 用修改后的 SVG 文件生成一个 tid 文件，复制到 TW 的 tiddlers/diagrams 文件夹中

Note

不要执着于使 wiki 中的 SVG 与亿图客户端中的展示完全一致。有一些差异。在亿图中做图时尽量 使用细线条。

Troubleshooting

空白字符的问题

使用 做图软件 生成的 SVG 时，注意 不要去做 prettify。因为 prettify 后会向 SVG 文档加入额外的空格，而浏览器在渲染这些空格后，效果就跟原来的排版不一样了。

使用 SVG 嵌入 TiddlyWiki 存在的问题

TiddlyWiki 大概支持两种方式嵌入 SVG：

• 作为单独的 SVG tiddler（即该 tiddler 的 type 为 image/svg+xml）。这种方式使得这个 tiddler 无论是单独展示，还是被嵌入（transclude）其他 tiddler 时，它都是以 data URI 形式作为图片展示。这使得你没法复制其中的文字或者点击其中的链接
• 作为内联元素嵌入一个 text/vnd.tiddlywiki 类型的 tiddler。类似在 Markdown 里面支持写 HTML，WikiText 中也支持写 HTML 或者 SVG

尝试了亿图（Edrawsoft）的导出 SVG。在线版导出的 SVG 与桌面版的不一样。当作为 inline SVG 嵌入 tiddler 中时：

• 在线版的 不显示文字。但 SVG 单独打开时是正常的。可能跟它使用了 <foreignObject> 有关系
• 桌面版的 正常，但显示效果与桌面中有小差异（比如厚度看起来不太一样）

因此，可以用桌面版实现 SVG image map，即点击 SVG 中某一元素，跳转到某一 tiddler。