Html SVG:链接到包含文档的位置

Html SVG:链接到包含文档的位置,html,css,svg,Html,Css,Svg,我目前正在开发一个使用基于SVG的地图的站点,其中包含可点击的点。理想情况下,我希望这些映射指向包含它的HTML文档中的位置(每个区域一个) HTML: <object type="image/svg+xml" data="https://ffu.jmaris.me/carte.svg"> Your browser does not support SVG </object> <div id="region1" class="region"> Stuff

我目前正在开发一个使用基于SVG的地图的站点,其中包含可点击的点。理想情况下,我希望这些映射指向包含它的HTML文档中的位置(每个区域一个)

HTML:

<object type="image/svg+xml" data="https://ffu.jmaris.me/carte.svg">
  Your browser does not support SVG
</object>
<div id="region1" class="region"> Stuff ...</div>
<div id="region2" class="region"> Stuff ...</div>
<div id="region3" class="region"> Stuff ...</div>
<div id="region4" class="region"> Stuff ...</div>
我希望能够在不使用绝对路径的情况下指向SVG中的page.html#region2(因为它当前在开发服务器上运行,而且,部署后URL可能会在将来发生变化)

有办法做到这一点吗


提前感谢

在这里您必须依赖javascript

中的锚(
)将更改对象文档的位置,因此我们无法直接使用它。
但是,如果您的文件共享同一来源,并且您没有像stacksnippets那样在过度保护的iframe中运行整个过程™ 您可以非常轻松地访问父文档:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100">
    <a id="loc1" xlink:href="#">
      <rect x="0" y="0" width="20" height="20" fill="green"/>
    </a>
    <a id="loc2" xlink:href="#">
      <rect x="50" y="0" width="20" height="20" fill="red"/>
    </a>
    <script>
    var anchors = document.querySelectorAll('a');
    anchors.forEach(function(a){
        a.addEventListener('click', function(e){
            // where anchor's id represent parent doc element's ids.
            window.parent.location.hash = this.id;
            });
        });
    </script>
</svg>

loc1

loc2
您可以使用js吗?对象内的锚定将更改对象文档的位置,而不是主文档。如果js允许,我可以使用它:)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100">
    <a id="loc1" xlink:href="#">
      <rect x="0" y="0" width="20" height="20" fill="green"/>
    </a>
    <a id="loc2" xlink:href="#">
      <rect x="50" y="0" width="20" height="20" fill="red"/>
    </a>
    <script>
    var anchors = document.querySelectorAll('a');
    anchors.forEach(function(a){
        a.addEventListener('click', function(e){
            // where anchor's id represent parent doc element's ids.
            window.parent.location.hash = this.id;
            });
        });
    </script>
</svg>