如何用纯HTML实现object标签加载的SVG内部ID锚点跳转？

当通过<object>标签加载外部SVG文件时，HTML页面中的锚点链接（#id）无法定位到SVG内的元素——因为<object>会将SVG作为独立文档加载，和主HTML文档上下文完全隔离。内联SVG时该功能正常，但外部加载时会失效。

场景代码回顾 #

主HTML代码：

[some-html]
<object type="image/svg+xml" data="/somesvg.svg"></object>
[more-html]
<a href="#id-somewhere-in-the-svg">Jump to #id-somewhere-in-the-svg</a>

SVG内部代码片段：

<a id="id-somewhere-in-the-svg" xlink:href="...">
    <g id="some-id">
        <path d="..." />
    </g>
</a>

纯HTML解决方案 #

方案1：改用<iframe>加载SVG

将<object>替换为<iframe>，给iframe设置name属性，同时调整HTML中的锚点链接的target属性指向该iframe：

[some-html]
<iframe name="svg-frame" type="image/svg+xml" src="/somesvg.svg" style="border:0; width:100%; height:auto;"></iframe>
[more-html]
<a href="/somesvg.svg#id-somewhere-in-the-svg" target="svg-frame">跳转到SVG内的目标元素</a>

原理：iframe支持通过URL中的fragment identifier直接定位到内部文档的锚点，配合target指定跳转目标为iframe，就能实现跨文档的锚点定位。

方案2：内联SVG（若业务允许）

如果不需要外部加载SVG，直接将SVG代码内嵌到HTML中，原本的锚点链接就能正常工作，这是最直接的纯HTML方案，无需额外处理。

内容的提问来源于stack exchange，提问作者Luuk Verhagen