如何使用父容器制作svg缩放？ [英] How can I make an svg scale with its parent container?

问题描述

当尺寸是非原生的时，我想有一个内联svg元素的内容缩放。当然，我可以把它作为一个单独的文件，并像这样缩放。

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.

index.html：< img src =foo.svg style =width：100％; />

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

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

但是，我想通过CSS向SVG添加额外的样式，所以链接外部样式不是一个选项。如何制作内联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?

推荐答案

要指定SVG图像内的坐标， ，使用SVG元素上的 viewBox 属性来定义图像的边界框在图像的坐标系中的位置，并使用 width

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

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

For instance, if you have the following:

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

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

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

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

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

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

如果设置视图框，则会导致图像变换，的图像）被放大以适合给定的宽度和高度（在页面的坐标系统中）。例如，要将三角形缩放为100x50像素：

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:

<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视口的宽度：

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

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

请注意，默认情况下会保留宽高比。因此，如果您指定元素的宽度为100％，但高度为50像素，则实际上只会缩放到50像素的高度（除非您有一个非常窄的窗口）：

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

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

If you actually want it to stretch horizontally, disable aspect ratio preservation with 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语法）

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

这篇关于如何使用父容器制作svg缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！