目前我正在用 HTML 制作一个乐队网站。我的想法是在 -tag 中有一个横幅，您可以在其中单击单独的成员以转到“关于我们”页面中的单独页面。基础工作正常，但我有 2 个问题。
如果我缩小页面， 的是响应式的，但如果我放大，它们就不再响应了。
整个 SVG 只能在我的笔记本电脑上运行，在任何其他设备上根本无法运行。
我该如何解决这个问题？
这是我现在拥有的相关代码:
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html{
font-family:'Lato', sans-serif;
text-align:center;
background-color:#F1F1F1;
color:#212121;
font-size:1.0875vw;
}
@media screen and (max-width:1150px){
html{
font-size:12.50625px;
}
}
body{
margin:0px;
}
.afbeelding_container{
position:relative;
float:left;
}
.afbeelding_container .tekst_container{
position:absolute;
top:10px;
left:20px;
color:#FFFFFF;
}
.svg_container{
position:absolute;
top:0.625em;
left:1.25em;
}
.MenuButton{
font-size:38px;
cursor:pointer;
color:#F1F1F1;
float:left;
}
@media screen and (max-width:441.92px) {
.MenuButton {
font-size:8.2vw;
}
}
</style>
</head>
<body>
<nav style="width:100%">
<div style="width:100%" class="afbeelding_container">
<img src="Afbeeldingen/Jeopardy Banner 1.jpg" style="width:100%">
<div class="svg_container">
<svg viewBox="0 0 1600 460">
<g class="hover_group" opacity="0">
<a href="maudn.html">
<rect x="195.2" y="54.4" width="228.8" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="maudj.html">
<rect x="448" y="54.4" width="214.4" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="bjorn.html">
<rect x="691.2" y="54.4" width="234.56" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="anne.html">
<rect x="960" y="54.4" width="200" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<g class="hover_group" opacity="0">
<a href="merwin.html">
<rect x="1174.4" y="54.4" width="219.52" height="405.3" opacity="0.2" fill="#FFFFFF"/>
</a>
</g>
<a href="https://www.sophiebik.nl">
<rect x="0" y="403" width="100" height="56" style="fill:blue;fill-opacity:0"/>
</a>
</svg>
<div class="tekst_container">
<p><div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content" style="margin-left:1.vw">
<a href="index.html" >Home</a>
<a href="over_ons.html">Over ons</a>
<a href="contact.html">Contact</a>
</div>
</div>
<span class="MenuButton" id="MenuButton" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.getElementById("MenuButton").style.color = "#222";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("MenuButton").style.color = "#F1F1F1";
}
</script>
</p>
</div>
</div>
</div>
</nav>
</body>
</html>
最佳答案
我建议放弃您为此使用可缩放 SVG 的计划，简单地允许框由您的图像调整大小，并将框绝对放置在其中以与图像位置对齐。下面的例子非常简单，一旦你有了百分比位置和宽度，这个例子就会完美地放大和缩小:
header {
position: relative;
width: 80vw;
height: auto;
margin: 0px auto;
}
header img {
width: 100%;
}
header a {
position: absolute;
border: 1px solid red;
}
header a#member1 {
width: 23%;
height: 25%;
top: 25%;
left: 13%;
}
header a#member2 {
width: 13%;
height: 55%;
top: 5%;
left: 43%;
}
header a#member3 {
width: 33%;
height: 15%;
top: 35%;
left: 65%;
}<header>
<img src="http://placehold.it/900x300" />
<a href="#" id="member1">Band Member 1</a>
<a href="#" id="member2">Band Member 2</a>
<a href="#" id="member3">Band Member 3</a>
</header>请记住，我所有的值实际上都只是示例，因为我不知道您实际想要的结果应该是什么样子。
关于javascript - SVG 不会再次放大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49998881/