开发问题求助:如何在svg中插入指向本地md笔记的链接

我想开发一个插件,功能如下:
通过特定的语法块生成svg图片(正如mermaid一样),以此技术为基础,可以制作思维导图。

mermaid有绘制流程图的语法,可以绘制类似图片。例如这里的用法,但其绘制的图片不能插入超链接,无法实现点击思维导图svg实现跳转。

直接在ob笔记中写如下svg可以实现超链接功能,(注意需要将换行、缩进删除)

<svg style="background: #aa325222;" >
    <a xlink:href="https://www.bilibili.com/">
        <rect x="10" y="10" width="130" height="30" rx="10" ry="10" fill="#00000022"/>
        <text x="30" y="30" font-size="12">点击跳转BiLiBiLi</text>
    </a>
</svg> 

效果如下图:点击文字部分即可跳转到b站网页


但应该如何跳转向本地库中的md笔记?

作为参考,md本地笔记的链接如下

<a class="internal-link" href="md笔记文件名" target="_blank" rel="noopener">
        预览模式下显示的文字
</a>

如果直接写为
xlink:href="md笔记文件名"
xlink:href="app://obsidian.md/md笔记文件名"
相对路径:xlink:href="./
绝对路径:xlink:href=C:\Users\MoMo\Desktop\卡片笔记库"
只会显示为一个可点击的链接,但无法跳转

望各位大佬指教~

写成这样呢?


xlink:href="obsidian://open?vault=ChenBaosNotes&file=100%20%E9%98%85%E8%AF%BB%E7%AC%94%E8%AE%B0%2F2021-12-21%2011%CB%9057%CB%9016"、

1 个赞

上面的那个是 “复制 Obsidian 链接”后得到的 URI。

1 个赞

太感谢啦!这个方法可行!查了下,这串链接是url编码,将每个字符写为%+两位16进制的形式。
这个网站可以用来解码和编码;
在线URL解码编码工具_蛙蛙在线工具 (iamwawa.cn)


上图中svg代码如下

<svg style="background: #ab9a99ff;" >
	<a xlink:href= "obsidian://open?vault=%E7%94%9F%E6%B4%BB%E7%AC%94%E8%AE%B0&file=%E8%BE%93%E5%87%BA%E8%AF%AD%E5%8F%A5">
		<text x="30" y="30" font-size="12">点击跳转到笔记:输出语句
		</text>
	</a>
</svg>

将编码后的笔记文件url填入svg代码中即可实现跳转

还有一种更简单的方法:
插入的文字直接用[[]]包起来,会自动处理成内部链接

2022/1/2补记
需要满足以下条件之一方可实现(我也不知道为什么)

  1. svg代码前需要有文字,这样ob才会将svg包在p标签内,并处理成内部链接
  2. svg 代码源码 不可换行,开md语法严格模式也不能换行

例如

<svg style="background: #ab9a99ff;" >
<text x="30" y="30" font-size="12">点击跳转到笔记:[[输出语句]]</text>
<text x="30" y="60" font-size="12">点击跳转到笔记:[[不存在的笔记]]></text>
</svg>

效果如下
image
笔记存在,点击直接跳转
笔记不存在,点击自动创建空笔记并跳转

1 个赞

上面那种双方括号做内链的方法在V0.13.14版本失效了,可采用如下方案

<svg style="background: #aa325222;" viewBox='0 0 100 20'>
    <a data-href="一条笔记" class="internal-link" >
        <text x="5" y="5" font-size="2">点击跳转到“一条笔记”</text>
    </a>
     <a xlink:href="https://www.bilibili.com/">
        <text x="5" y="8" font-size="2">点击打开网站:BiLiBiLi</text>
    </a>
</svg> 

2 个赞