Html 如何使用其父容器制作 svg 比例？

How can I make an svg scale with its parent container?

提问by bjb568

I want to have an inline svg element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that.

当大小为非本机时，我想要一个内联 svg 元素的内容比例。当然，我可以将它作为一个单独的文件并像这样缩放。

index.html: <img src="foo.svg" style="width: 100%;" />

索引.html： <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

foo.svg： <svg width="123" height="456"></svg>

However, I want to add additional styles to the SVG thru CSS, so linking an external one is not an option. How do I make an inline SVG scale?

但是，我想通过 CSS 向 SVG 添加其他样式，因此链接外部样式不是一种选择。如何制作内联 SVG 比例尺？

回答by Brian Campbell

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBoxattribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the widthand heightattributes to define what the width or height are with respect to the containing page.

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

For instance, if you have the following:

例如，如果您有以下内容：

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

It will render as a 10px by 20px triangle:

它将呈现为 10px x 20px 的三角形：

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

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

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

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

如果您设置视图框，则会导致它转换图像，从而将给定的框（在图像的坐标系中）放大以适应给定的宽度和高度（在页面的坐标系中）。例如，要将三角形放大为 100 像素乘 50 像素：

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

If you want to scale it up to the width of the HTML viewport:

如果要将其缩放到 HTML 视口的宽度：

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

Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

请注意，默认情况下，纵横比被保留。因此，如果您指定元素的宽度应为 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>

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

如果您确实希望它水平拉伸，请使用以下命令禁用纵横比保留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>

(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)

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

回答by agm1984

After like 48 hours of research, I ended up doing this to get proportional scaling:

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

NOTE: This sample is written with React. If you aren't using that, change the camel case stuff back to hyphens (ie: change backgroundColorto background-colorand change the style Objectback to a String).

注意：这个示例是用 React 编写的。如果您不使用它，请将驼峰式大小写的内容更改回连字符（即：更改backgroundColor为background-color并将样式更改Object回 a 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>

Here's what is happening in the above sample code:

这是上面示例代码中发生的事情：

VIEWBOX

视窗

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

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

min-x, min-y, width and height

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

ie: viewbox="0 0 1000 1000"

即： viewbox="0 0 1000 1000"

Viewbox is an important attribute because it basically tells the SVG what size to draw and where. If you used CSS to make the SVG 1000x1000 px but your viewbox was 2000x2000, you would see the top-left quarterof your SVG.

Viewbox 是一个重要的属性，因为它基本上告诉 SVG 绘制什么大小以及在哪里绘制。如果您使用 CSS 使 SVG 为 1000x1000 像素，但您的视图框为 2000x2000，您将看到SVG的左上角四分之一。

The first two numbers, min-x and min-y, determine if the SVG should be offset inside the viewbox.

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

My SVG needs to shift up/down or left/right

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

Examine this: viewbox="50 50 450 450"

检查这个： viewbox="50 50 450 450"

The first two numbers will shift your SVG left 50px and up 50px, and the second two numbers are the viewbox size: 450x450 px. If your SVG is 500x500 but it has some extra padding on it, you can manipulate those numbers to move it around inside the "viewbox".

前两个数字会将您的 SVG 向左移动 50 像素和向上移动 50 像素，后两个数字是视图框大小：450x450 像素。如果您的 SVG 是 500x500，但上面有一些额外的填充，您可以操纵这些数字以在“视图框”内移动它。

Your goal at this point is to change one of those numbers and see what happens.

此时您的目标是更改这些数字之一，然后看看会发生什么。

You can also completely omit the viewbox, but then your milage will vary depending on every other setting you have at the time. In my experience, you will encounter issues with preserving aspect ratio because the viewbox helps define the aspect ratio.

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

PRESERVE ASPECT RATIO

保留纵横比

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

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

Based on my research, there are lots of different aspect ratio settings, but the default one is called xMidYMid meet. I put it on mine to explicitly remind myself. xMidYMid meetmakes it scale proportionately based on the midpoint X and Y. This means it stays centered in the viewbox.

根据我的研究，有许多不同的纵横比设置，但默认设置称为xMidYMid meet. 我把它放在我的身上是为了明确提醒自己。xMidYMid meet使其基于 X 和 Y 中点按比例缩放。这意味着它在视框中保持居中。

WIDTH

宽度

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

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

Look at my example code above. Notice how I set only width, no height. I set it to 100% so it fills the container it is in. This is what is probably contributing the most to answering this Stack Overflow question.

看看我上面的示例代码。请注意我如何只设置宽度，而不设置高度。我将它设置为 100%，所以它填满了它所在的容器。这可能是回答这个 Stack Overflow 问题的最大贡献。

You can change it to whatever pixel value you want, but I'd recommend using 100% like I did to blow it up to max size and then control it with CSS via the parent container. I recommend this because you will get "proper" control. You can use media queries and you can control the size without crazy JavaScript.

您可以将其更改为您想要的任何像素值，但我建议像我一样使用 100% 将其放大到最大尺寸，然后通过父容器使用 CSS 控制它。我建议这样做，因为您将获得“适当”的控制。您可以使用媒体查询，并且无需疯狂的 JavaScript 即可控制大小。

SCALING WITH CSS

用 CSS 缩放

Look at my example code above again. Notice how I have these properties:

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

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

This is additional, but it shows you how to allow the user to resize the SVG while maintaining the proper aspect ratio. Because the SVG maintains its own aspect ratio, you only need to make width resizable on the parent container, and it will resize as desired.

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

We leave height alone and/or set it to auto, and we control the resizing with width. I picked width because it is often more meaningful due to responsive designs.

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

Here is an image of these settings being used:

这是正在使用的这些设置的图像：

If you read every solution in this question and are still confused or don't quite see what you need, check out this link here. I found it very helpful:

如果您阅读了此问题中的所有解决方案，但仍然感到困惑或不太明白您需要什么，请在此处查看此链接。我发现它非常有帮助：

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

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

It's a massive article, but it breaks down pretty much every possible way to manipulate an SVG, with or without CSS. I recommend reading it while casually drinking a coffee or your choice of select liquids.

这是一篇庞大的文章，但它几乎分解了使用或不使用 CSS 操作 SVG 的所有可能方法。我建议在随便喝一杯咖啡或您选择的液体时阅读它。

回答by Gary Hayes

You'll want to do a transform as such:

你会想要做一个这样的转换：

with JavaScript:

使用 JavaScript：

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

With CSS:

使用 CSS：

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

Wrap your SVG Page in a Group tag as such and target it to manipulate the whole page:

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

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

Note: Scale 1.0 is 100%

注意：比例 1.0 是 100%

回答by Kerry7777

Messing around & found this CSS seems to contain the SVG in Chrome browser up to the point where the container is larger than the image:

弄乱并发现此 CSS 似乎包含 Chrome 浏览器中的 SVG，直到容器大于图像的位置：

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

Also seems to be working in FF + IE 11.

似乎也在 FF + IE 11 中工作。

回答by canbax

changing the SVG file was not a fair solution for me so instead, I used relative CSS units.

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

vh, vw, %are very handy. I used a CSS like height: 2.4vh;to set a dynamic size to my SVG images.

vh, vw,%非常方便。我使用 CSS likeheight: 2.4vh;为我的 SVG 图像设置动态大小。

回答by Kasim ?EN

Another simple way is

另一种简单的方法是

transform: scale(1.5);

回答by Fabian Madurai

Adjusting the currentScale attribute works in IE ( I tested with IE 11), but not in Chrome.

调整 currentScale 属性在 IE 中有效（我用 IE 11 测试过），但在 Chrome 中无效。