如何在浏览器调整大小时制作可调整的 svg [英] How to make adjustable svg on browser resize

问题描述

我用 svg 创建了一个形状，但是当调整浏览器的大小时，它会被裁剪.如果有人知道解决方案，请回答.

I have created a shape with svg but when resize the browser it gets croped. If any knows the solution please answer.

<svg width="1315" height="65" id="intro-weg" style="background: red"> 
    <g transform="matrix(1.25,0,0,-1.25,0,611.25)"> 
        <g transform="scale(0.1,0.1)"> 
            <path d="m 10520,4376 c -383.8,320.87 -877.97,514 -1417.32,514 0,0 526.42,-552.76 -2211.03,-552.76 L 0,4337.24 0,0 l 10520,0 0,4376" class="colorize"></path>
        </g> 
    </g> 
</svg>

推荐答案

您可以按照以下步骤使您的 SVG 具有响应性:

You can follow these steps to make your SVG responsive:

1. 从 svg 元素中删除硬编码的 width、height 属性.

<svg id="intro-weg" style="background: red">

添加 viewBox 属性，将所需的宽度和高度(与您之前为 svg 指定的相同)分别指定为第 3 个和第 4 个值:(更多关于 viewBox)

Add viewBox attribute, specifying the required width and height (same as you specified for your svg earlier) as the 3rd and 4th values respectively: (more about viewBox)

<svg id="intro-weg" viewBox="0 0 1315 65" style="background: red">

在 css 中为 svg 元素指定宽度和高度:

Specify width and height for your svg element in css:

svg#intro-weg{
   width: 100%;
   height: auto;
}

您的 svg 现在应该可以响应了.

Your svg should be responsive now.

这篇关于如何在浏览器调整大小时制作可调整的 svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！