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创建的形状响应任何屏幕尺寸？

1 个答案: