TiddlyWiki: SVG and Interactive Diagrams

27th August 2020 at 7:52am

使用 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。