css - 如何使用其父容器制作 svg 比例尺？

Question

当 size 不是原生时，我希望有一个内联 svg 元素的内容缩放。当然，我可以将它作为一个单独的文件并像这样缩放它。

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

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

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

Answer 1

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

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

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

它将呈现为 10 x 20 像素的三 Angular 形:

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

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

如果您设置 View 框，这会导致它转换图像，使得给定的框(在图像的坐标系中)被放大以适应给定的宽度和高度(在页面的坐标系中)。例如，将三 Angular 形放大为 100 像素 x 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>

如果你想把它放大到 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 的高度(除非您的窗口非常窄):

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

如果您确实希望它水平拉伸(stretch)，请使用 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 语法)