Javascript SVG不会再次放大
目前我正在用HTML制作一个乐队网站。我的想法是在-标签上有一个横幅，你可以点击单独的成员进入“关于我们”页面中的单独页面。基本的工作，但我有两个问题Javascript SVG不会再次放大,javascript,html,css,svg,responsive,Javascript,Html,Css,Svg,Responsive,目前我正在用HTML制作一个乐队网站。我的想法是在-标签上有一个横幅，你可以点击单独的成员进入“关于我们”页面中的单独页面。基本的工作，但我有两个问题 如果我缩小页面，则响应速度会加快，但如果我放大页面，则响应速度不再加快 整个SVG只在我的笔记本电脑和任何其他设备上工作，根本不工作 我怎样才能解决这个问题 这是我现在掌握的相关代码： <!DOCTYPE> <html> <head> <meta name="viewport" content="widt
<!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>
html{
字体系列：'Lato'，无衬线；
文本对齐：居中；
背景色：#f1f1；
颜色：#212121；
字体大小：1.0875vw；
}
@媒体屏幕和屏幕（最大宽度：1150px）{
html{
字体大小：12.50625px；
}
}
身体{
边际：0px；
}
.afbeelding_集装箱{
位置：相对位置；
浮动：左；
}
.afbeelding_集装箱。tekst_集装箱{
位置：绝对位置；
顶部：10px；
左：20px；
颜色：#FFFFFF；
}
.svg_容器{
位置：绝对位置；
顶部：0.625em；
左：1.25em；
}
MenuButton先生{
字号：38px；
光标：指针；
颜色：#f1f1；
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：441.92px）{
MenuButton先生{
字体大小：8.2vw；
}
}
☰
函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
document.getElementById（“菜单按钮”）.style.color=“#222”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
document.getElementById（“菜单按钮”）.style.color=“#f1f1”；
}
标题{
位置：相对位置；
宽度：80vw；
高度：自动；
保证金：0px自动；
}
收割台img{
宽度：100%；
}
标题a{
位置：绝对位置；
边框：1px纯红；
}
标题a#成员1{
宽度：23%；
身高：25%；
最高：25%；
左：13%；
}
标题a#成员2{
宽度：13%；
身高：55%；
最高：5%；
左：43%；
}
标题a#成员3{
宽度：33%；
身高：15%；
最高：35%；
左：65%；
}
宽度高度xmlnswidth=“100%”height=“100%”version=“1.1”xmlns=”http://www.w3.org/2000/svg“%