从单独的 HTML 页面链接到 SVG 中的文本元素

Question

是否可以创建指向（而不是来自）SVG 文件的一部分的超链接？具体来说，我想放大或突出显示 SVG 文件中的特定文本元素，但要从单独的 HTML 文件中进行。

我将预先了解 SVG 文本元素的 ID 和位置。

我试过像下面这样的 URL，但没有成功，引用了文本元素 ID 和文本片段中的一个/两个：

• ../example.svg#obj-text-4005
• ../example.svg#:~:text=abc

（更新，抱歉，如果我遗漏了重要的细节）

SVG 是我自己生成的集合的一部分，我希望（也许天真地）我可以创建一个不相关的 HTML 页面，作为关键字的“索引”。这个“不相关的 HTML 页面”可以只是一个 URL 列表，每个 URL 指向给定 SVG 中的不同文本元素。

SVG 是否可以被直接引用/打开，或者它是否/如何需要成为它自己的 HTML 页面的一部分，对我来说是一个开放和未知的问题。这是一个任何有效且最实用的问题。

Answer 1

我发现了几件事解决了我的问题。

1. 以

   <view>

   标签为目标：我不认为 SVG 中的目标需要是

   <view>

   标签。当我创作我试图链接到的特定 SVG 时，我可以根据需要创建那些

   <view>

   标签。例如。，

   • <view id="obj-text-4005" viewBox="1800 900 200 200"/>

   • 现在 URL 按我的预期工作：./example.svg#obj-text-4005
2. 使用

   #svgView()

   ：也许比第一个选项更酷的是我发现了

   #svgView()

   目标属性。它允许在 URL 中定义一个视图框，示例如下：
   • 保持纵横比：./example.svg#svgView(viewBox(1800,900,200,200))
   • 不保持纵横比：./example.svg#svgView(viewBox(1800,900,200,200);preserveAspectRatio(none))

参考资料如下：

• https://www.w3.org/TR/SVG11/linking.html#ViewElementViewTargetAttribute
• https://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute
• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/view