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

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

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

<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>

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

视图框

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。我建议你在随意喝咖啡或其他饮品的时候读这本书。

2018-03-29 18:55:27

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

Vh, vw， %都很方便。我使用CSS的高度:2.4vh;为我的SVG图像设置动态大小。

2019-10-08 12:08:47

另一种简单的方法是

transform: scale(1.5);

2020-03-17 16:53:37

你会想这样做一个转换:

使用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%

2013-10-21 02:53:20

要指定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语法)

2013-10-21 02:28:28