如何使用其父容器制作 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:

foo.svg: <svg width="123" height="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 和 height 属性来定义宽度或高度相对于包含页面.

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>

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

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%，但高度应为 50px，则它实际上只会放大到 50px 的高度(除非您的窗口非常窄):

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