我正在尝试制作一个内部有4个椭圆的svg,它们重叠。它工作正常,但是当屏幕尺寸变小时,它似乎没有很好的反应。我该怎么做才能使其响应?
这是我目前svg元素的片段:
{{1}}
这是它在普通显示器上的外观 Forward slash or backslash?
这是在手机屏幕上:
答案 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会缩放。
<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;