我如何能使svg缩放与它的父容器?

要在SVG图像中指定独立于图像缩放大小的坐标，请使用SVG元素上的viewBox属性来定义图像的边界框在图像的坐标系统中的位置，并使用width和height属性来定义相对于包含页面的宽度或高度。

例如，如果你有以下情况:

<svg>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

它将呈现为一个10px * 20px的三角形:

现在，如果你只设置宽度和高度，这将改变SVG元素的大小，但不会缩放三角形:

<svg width=100 height=50>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

如果您设置了视图框，则会导致它转换图像，以便将给定的框(在图像的坐标系统中)按比例放大以适应给定的宽度和高度(在页面的坐标系统中)。例如，要将三角形放大到100px * 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

如果你想把它放大到HTML视口的宽度:

<svg width="100%" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

注意，默认情况下，长宽比是保留的。因此，如果你指定元素的宽度为100%，但高度为50px，它实际上只会缩放到50px的高度(除非你有一个非常窄的窗口):

<svg width="100%" height="50px" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

如果你真的想让它水平拉伸，使用preserveAspectRatio=none禁用长宽比保存:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>

(注意，虽然在我的例子中，我使用适用于HTML嵌入的语法，但在StackOverflow中，我将示例作为图像包含在另一个SVG中，因此我需要使用有效的XML语法)

你会想这样做一个转换:

使用JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

用CSS:

#yourtarget {
transform:scale(2.0);
-webkit-transform:scale(2.0);
}

将您的SVG页面包装在Group标签中，并将其定位为操纵整个页面:

<svg>
<g id="yourtarget">
your svg page
</g>
</svg>

请注意: Scale 1.0是100%

乱搞&发现这个CSS似乎包含SVG在Chrome浏览器中，直到容器比图像大:

div.inserted-svg-logo svg { max-width:100%; }

似乎也在FF + IE 11工作。

经过大约48小时的研究，我最终这样做是为了得到比例缩放:

注意:这个示例是用React编写的。如果你不使用它，将驼峰大小写的东西更改为连字符(即:将backgroundColor更改为background-color，并将Object样式更改为String)。

<div
style=\{\{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>

下面是上面示例代码中发生的事情:

VIEWBOX

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Min-x, min-y，宽度和高度

Ie: viewbox="0 0 1000 1000"

Viewbox是一个重要的属性，因为它基本上告诉SVG绘制什么大小和位置。如果您使用CSS使SVG为1000x1000px，但您的视图框为2000x2000，您将看到SVG的左上角。

前两个数字min-x和min-y决定SVG是否应该在视图框内偏移。

我的SVG需要向上/向下或向左/右移动

viewbox="50 50 450 450"

前两个数字将使SVG向左移动50px，向上移动50px，后两个数字是视图框的大小:450x450 px。如果你的SVG是500x500，但它有一些额外的填充，你可以操纵这些数字在“视图框”中移动它。

此时，您的目标是改变其中一个数字，看看会发生什么。

你也可以完全省略视图框，但是你的里程数会根据你当时的其他设置而变化。根据我的经验，您会遇到保留纵横比的问题，因为视图框帮助定义纵横比。

保持纵横比

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

根据我的研究，有很多不同的纵横比设置，但默认的是xMidYMid meet。我把它放在我的手机上，明确地提醒自己。xMidYMid meet使它根据中点X和y按比例缩放。这意味着它在视图框中保持居中。

宽度

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

请看上面的示例代码。注意，我只设置宽度，不设置高度。我把它设置为100%，所以它会装满它所在的容器。这可能是回答Stack Overflow问题的最大原因。

你可以改变它为任何你想要的像素值，但我建议使用100%，就像我做的那样，把它放大到最大大小，然后通过父容器用CSS控制它。我推荐这样做是因为你会得到“适当的”控制。你可以使用媒体查询，不需要疯狂的JavaScript就可以控制大小。

使用CSS进行缩放

再看看上面的示例代码。注意我是如何拥有这些属性的:

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

这是额外的，但它向您展示了如何允许用户调整SVG的大小，同时保持适当的纵横比。因为SVG保持自己的纵横比，所以只需要在父容器上调整宽度的大小，它就会根据需要调整大小。

我们保持高度不变和/或将其设置为自动，我们用宽度控制大小的调整。我选择宽度是因为它通常更有意义，因为响应式设计。

下面是使用这些设置的图片:

如果你阅读了这个问题的每个答案，但仍然困惑或不太清楚自己需要什么，请点击这里的链接。我发现它非常有用:

https://css-tricks.com/scale-svg/

这是一篇内容丰富的文章，但是它分解了操作SVG的几乎所有可能的方法，包括使用或不使用CSS。我建议你在随意喝咖啡或其他饮品的时候读这本书。

调整currentScale属性在IE中工作(我用IE 11测试)，但在Chrome中不工作。

改变SVG文件对我来说不是一个公平的解决方案，所以我使用相对CSS单位。

vh， vw， %非常方便。我使用类似height: 2.4vh;的CSS来设置SVG图像的动态大小。

另一种简单的方法是

transform: scale(1.5);

这里有一个简单的方法:

大多数svg都有一个视图框，像这样:

<svg viewBox="0 0 24 30" ...>

你可以很容易地在css中控制它们的大小:

svg {
height: 20px;
}

类型2:如果svg有宽度和高度，但没有视口，如下所示:

<svg width="810" height="540">

然后你可以手动添加一个与它的宽度和hegith完全相同的视图框，如下所示:

<svg width="810" height="540" viewBox="0 0 810 540">

然后你可以做与类型1相同的事情。

如果你想缩放SVG没有preserveAspectRatio属性。

通过这种方式，SVG将始终拉伸以填充width和height，为此，它将只调整width或height的大小，如果必要的话，它正在寻找这个数天，所以我想在这里分享它，以防其他人正在寻找这个

你必须从<svg>中删除width和height，并添加viewBox属性并添加preserveAspectRatio="none"

例子

<?xml version="1.0" encoding="utf-8"?>


<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">


<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>