如何使用其父容器制作svg秤？

Question

当大小为非本机时，我希望有一个内嵌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图像内的坐标，请使用viewBoxSVG元素上的属性来定义图像的边界系统在图像的坐标系中，并使用width和height属性来定义SVG图像中的坐标。宽度或高度是相对于包含页面的。

例如，如果您具有以下条件：

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

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

!10x20三角形

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

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

!10x20三角形

如果设置了视图框，则将其转换为图像，以使给定的框（在图像的坐标系中）按比例缩放以适合给定的宽度和高度（在页面的坐标系中）。例如，将三角形放大为100px x
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>

!100x50三角形

如果要将其缩放到HTML视口的宽度，请执行以下操作：

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

!300x150三角形

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

!100x50三角形

如果您确实希望它水平伸展，请使用禁用纵横比保存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>

!300x50三角形

（请注意，虽然在我的示例中，我使用了适用于HTML嵌入的语法，而是将其嵌入到另一个SVG中，所以我需要使用有效的XML语法）