使 svg 在移动显示器上响应

Question

我正在尝试制作一个内部有 4 个椭圆的 svg，它们重叠。它工作正常，但当屏幕尺寸变小时，它似乎反应不佳。我应该怎么做才能让它响应？

这是我目前对 svg 元素的 sn-p：

<div class="row">
      <div class="col-md-12">
        <svg height="220" width="100%">
          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="125" cy="110" rx="95" ry="85" fill="url(#grad1)" />

          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="300" cy="110" rx="95" ry="85" fill="url(#grad1)" />


          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="475" cy="110" rx="95" ry="85" fill="url(#grad1)" />


          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="650" cy="110" rx="95" ry="85" fill="url(#grad1)" />

      </div>
    </div>

这是它在普通显示器上的样子

这在手机屏幕上：

Answer 1

如果您希望 SVG 缩放到其父容器的大小，那么您需要告诉浏览器 SVG 内容有多大，以便它知道需要缩放 SVG 多少才能适应可用空间。

你这样做的方式是使用viewBox 属性。 viewBox 值由四个数字组成：

<left X> <top Y> <width> <height>

您的四个椭圆占据了从 30,25（第一个椭圆的左上角）到 745,195（最后一个椭圆的右下角）的区域。所以你应该将viewBox 设置为：

 viewBox="30 25 715 170"

当你这样做时，SVG 会缩放。

<div class="row">
      <div class="col-md-12">
      
        <svg height="220" width="100%" viewBox="30 25 715 170">
          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="125" cy="110" rx="95" ry="85" fill="url(#grad1)" />

          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="300" cy="110" rx="95" ry="85" fill="url(#grad1)" />


          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="475" cy="110" rx="95" ry="85" fill="url(#grad1)" />


          <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,255);
              stop-opacity:0" />
              <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
            </radialGradient>
          </defs>
          <ellipse cx="650" cy="110" rx="95" ry="85" fill="url(#grad1)" />

         </svg>
      </div>
    </div>