如何使 SVG 创建的形状响应任何屏幕尺寸？

Question

我编码了 2 个出现在屏幕角落的圆圈，中间有一个“+”。但是，当我更换屏幕时，圆圈和“+”不会修改以适应新屏幕的尺寸

我查看了之前在此处提出的与此主题相关的问题，发现这些内容很有帮助。然而，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>

Answer 1

不要使用 1380 等直接像素大小，而是使用 100vw 和 100vh 等相对大小。如：

<svg width="100vw" height="100vh">

这将使它成为视口宽度的 100% 和视口高度的 100%

如何使 SVG 创建的形状响应任何屏幕尺寸？

How do I make SVG created shapes responsive to any screen size?

html

css

svg

screen