我如何用它的父容器制作svg缩放？

Question

我想有一个内联svg元素的内容缩放，当size是非本机的。当然，我可以把它作为一个单独的文件并按比例缩放。

index.html:

foo.svg:

但是，我想通过CSS向SVG添加额外的样式，所以链接外部样式不是一个选项。如何制作内联SVG缩放？

Answer 1

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

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

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

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

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

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

如果您设置了视图框，这将导致它转换图像，使给定的框（在图像的坐标系中）按比例放大，以适应给定的宽度和高度（在页面的坐标系中）。例如,将三角形放大到100px乘以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视口的宽度：

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

如果您实际上希望它水平拉伸，请使用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语法）