Html SVG:链接到包含文档的位置
我目前正在开发一个使用基于SVG的地图的站点,其中包含可点击的点。理想情况下,我希望这些映射指向包含它的HTML文档中的位置(每个区域一个) HTML: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
<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>