使svg在移动监视器上响应

时间:2018-01-09 11:16:37

标签: html svg bootstrap-4

我正在尝试制作一个内部有4个椭圆的svg,它们重叠。它工作正常,但是当屏幕尺寸变小时,它似乎没有很好的反应。我该怎么做才能使其响应?

这是我目前svg元素的片段:

{{1}}

这是它在普通显示器上的外观 Forward slash or backslash?

这是在手机屏幕上:

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您希望SVG扩展到其父容器的大小,那么您需要告诉浏览器SVG内容有多大,因此它知道需要多少才能扩展SVG以适应可用空间。< / p>

您使用viewBox属性的方式。 viewBox值由四个数字组成:

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

你的四个椭圆占据了从30,25(第一个椭圆的左上角)到745,195(最后一个椭圆的右下角)的区域。因此,您应将viewBox设置为:

 viewBox="30 25 715 170"

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;