SVG鼠标显示隐藏在热点
SVG鼠标显示隐藏在热点
提问于 2022-06-20 12:54:00
我创建了一个覆盖热点的地图图像。它是在inkscape中创建的，并作为SVG导出。这张地图只是一张测试草图。http://wilsonvisuals.art/zenmapillo/imagemap_responsive2.html我已经将SVG代码粘贴到带有css的html页面中。我现在正在尝试添加鼠标越位功能到热点。当用户在热点上鼠标移动时，它会显示工具提示或其他卡片。当它被吸走的时候又会藏起来。
我尝试过将html/css代码插入svg代码的几种方法，但从未起作用。下面是简单的html css。
- I这个方法可行吗？我该如何解决这个问题呢？
- 是一种更好的方法吗？我让它以这种方式工作，但是我使用的示例代码执行的功能与我想要的不同。是否有一些特定于在鼠标上显示/隐藏的示例代码？(我是Javascript文盲)。任何有关这方面的想法都将不胜感激。
<!DOCTYPE html>
<html>
<title>Zen Maps - Courtney & Comox, Vancouver Island</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/custom.css">
<style>
#myBtn {
margin: auto;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #4a178bff;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
div {
text-align: center;
}
h2 {
color: #4287f5;
}
.hide {
display: none;
border: 5px double #b4b8bf;
}
.hide2 {
display: none;
border: 5px double #b4b8bf;
}
.hide3 {
display: none;
border: 5px double #b4b8bf;
}
a {
display: block;
margin-top: 15px;
cursor: pointer;
text-decoration: none;
}
a:hover + span {
display: block;
color: #4287f5;
font-size: 20px;
}
a.two {
display: block;
margin-top: 15px;
cursor: pointer;
text-decoration: none;
}
a.two:hover + span {
display: block;
color: #4287f5;
font-size: 20px;
}
a.three {
display: block;
margin-top: 15px;
cursor: pointer;
text-decoration: none;
}
a.three:hover + span {
display: block;
color: #4287f5;
font-size: 20px;
}
</style>
<body>
<div class="mapdiv">
<!----to make svg responsive change fixed width to percentage and remove height property in the svg tag---->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg366"
width="3272.7273"
height="2029.0909"
viewBox="0 0 3272.7273 2029.0909"
sodipodi:docname="Comox3hotspot.svg"
inkscape:version="1.2 (dc2aeda, 2022-05-15)"
inkscape:export-filename="Comox1hotspot.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs370" />
<sodipodi:namedview
id="namedview368"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="0.38072222"
inkscape:cx="1086.0937"
inkscape:cy="1016.4891"
inkscape:window-width="1732"
inkscape:window-height="1290"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="g372" />
<g
inkscape:groupmode="layer"
inkscape:label="Image"
id="g372">
<image
width="3272.7273"
height="2029.0909"
preserveAspectRatio="none"
xlink:href="maps/Comox12.jpg"
id="image374" />
<a xlink:href="http://travelalberta.com/">
<clipPath id="alberta-clipper">
<path id="CA-AB" d="M1932…"/>
</clipPath>
<image clip-path="url(#alberta-clipper)"
width="1024" height="768"
xlink:href="crowsnest-pass.jpg" x="1300" y="150">
</image>
</a>
<a xlink:href="http://travelalberta.com/">
<path
style="opacity:1;fill:#310000"
d="m 853.64075,499.05151 c -152.34204,-2.62658 -152.34204,-2.62658 -152.34204,-2.62658 l 2.62658,168.10156 212.75354,31.51904 76.17102,-110.31665 z"
id="path562" />
</a>
<foreignObject x="20" y="20" width="160" height="160">
<span class="hide">
First Card
</span>
</foreignObject>
<a xlink:href="http://travelalberta.com/">
<path
style="opacity:1;fill:#333"
d="m 1452.5026,590.98206 -154.9687,186.48767 383.4817,84.05078 291.5512,7.87976 -112.9433,-309.93726 z"
id="path6362" />
</a>
<foreignObject x="20" y="20" width="160" height="160">
<span class="hide2">
Second Card
</span>
</foreignObject>
<a xlink:href="http://travelalberta.com/">
<path
style="opacity:1;fill:#777"
d="m 1329.053,1625.8573 57.7849,344.0829 643.5138,36.7722 -139.2091,-378.2285 z"
id="path6364"
inkscape:export-filename="path6364.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</a>
<foreignObject x="20" y="20" width="160" height="160">
<span class="hide3">
Third Card
</span>
</foreignObject>
</g>
</svg>
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2022-06-20 14:47:37
我会把卡片放在svg元素之外。这张卡可以是一个绝对位置的div (这样你就可以将它定位在你需要它的位置上)，并且不显示任何你在经过路径时才能看到的。
为了清晰起见，我简化了代码。
let paths = document.querySelectorAll("path");
paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.display = "none";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.display = "block";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});
function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
return {
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}#card {
position: absolute;
width: 100px;
height: auto;
display: none;
border: solid;
background: white;
pointer-events: none;
color:red;
padding:1em;
}<svg viewBox="0 0 3272.7273 2029.0909" id="svg" >
<g id="g372">
<image width="3272.7273" height="2029.0909" preserveAspectRatio="none" xlink:href="maps/Comox12.jpg" id="image374" />
<a xlink:href="http://travelalberta.com/">
<path style="opacity:1;fill:#310000" d="m 853.64075,499.05151 c -152.34204,-2.62658 -152.34204,-2.62658 -152.34204,-2.62658 l 2.62658,168.10156 212.75354,31.51904 76.17102,-110.31665 z" id="path562" data-text="first Card" />
</a>
<a xlink:href="http://travelalberta.com/">
<path style="opacity:1;fill:#333" d="m 1452.5026,590.98206 -154.9687,186.48767 383.4817,84.05078 291.5512,7.87976 -112.9433,-309.93726 z" id="path6362" data-text="Second Card" />
</a>
<a xlink:href="http://travelalberta.com/">
<path style="opacity:1;fill:#777" d="m 1329.053,1625.8573 57.7849,344.0829 643.5138,36.7722 -139.2091,-378.2285 z" id="path6364" data-text="third Card" />
</a>
</g>
</svg>
<div id="card"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72687352
复制相关文章
相似问题
腾讯云开发者
