我编码了 2 个圆圈，它们出现在屏幕的 Angular 上，中间有一个“+”。但是，当我更换屏幕时，圆圈和“+”不会修改以适应新屏幕的尺寸
我已经查看了之前在此处提出的与此主题相关的问题，我发现这些内容很有帮助。然而，svg 中的对象仍然无法响应屏幕尺寸的变化
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:20;">
<svg width="1380" height="820">
.fade-out {
animation: hide 3s ease-in forwards;
}
@keyframes hide {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}<!DOCTYPE html>
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:20;">
<!-- defines dimensions of svg screen-->
<svg width="100vw" height="100vh" >
<!-- creates greyscale gradient and attached it to dot 2 (top right)-->
<defs>
<linearGradient id="dot2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:grey;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black;stop-opacity:0.9" />
</linearGradient>
<filter id="shadow">
<feDropShadow dx="0.9" dy="0.9" stdDeviation="0.4"/>
</filter>
</defs>
<circle cx="1350" cy="40" r="25" fill="url(#dot2)" filter="url(#shadow)" class="fade-out" />
<!-- creates greyscale gradient and attaches it to dot 3 (bottom left)-->
<defs>
<linearGradient id="dot3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:grey;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black;stop-opacity:0.9" />
</linearGradient>
<filter id="shadow">
<feDropShadow dx="0.9" dy="0.9" stdDeviation="0.4"/>
</filter>
</defs>
<circle cx="40" cy="780" r="25" fill="url(#dot3)" filter="url(#shadow)" class="fade-out" />
<text x="670" y="440" style="fill:grey;stroke:black;opacity:0.9" font-size="100">+</text>
</svg>
</body>
</html>最佳答案
不要使用 1380 等直接像素大小，而是使用 100vw 和 100vh 等相对大小。如:
<svg width="100vw" height="100vh">
这将使它成为视口(viewport)宽度的 100% 和视口(viewport)高度的 100%
关于html - 如何使 SVG 创建的形状响应任何屏幕尺寸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57047113/