html - SVG viewbox 总是相对于它的大小？

Question

一个非常简单的例子，如果我有这个方形 SVG:

<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533"
    width="50px" height="50px">

我把它改成:

<svg class="svg-correct-symbol" viewBox="0 0 200 200"
        width="50px" height="50px">

我会看到大约四分之一的图像，对吧？因为宽度和高度是 window(viewbox) 的一半，所以您正在“浏览”以查看 SVG。

因此 View 框的编号:442.533 始终表示图像宽度/高度的 100%。

这个默认的viewbox数量是怎么设置的？这个 View 框的大小是由导出时文件的大小决定的吗？我想要一个像 viewBox="0 0 16 16" 这样更圆润的 viewBox。

对于已经导出的图像，我看不到更改它的方法。

Answer 1

没有默认的 viewBox 编号。它是在创建 svg 图像时定义的(手动或使用软件，如 illustrator)。它有 4 个坐标 x y width height。棘手的是这些坐标与图像尺寸无关，就像你提到的那样，它只定义了你正在“查看”的区域。

您可以将viewbox 设置为您想要的任何值。但是您还需要相应地缩放 svg 图像以适合您的新 View 框。同样，您可能还需要 translate/移动 x , y 轴上的图像以使其居中或适合框架/viewbox。

查看 svg transform从文档中。 This教程也可能有助于理解 svg 转换。

如果您使用的是像 illustrator 这样的软件，您需要做的就是设置定义 View 框的画板尺寸，然后相应地缩放。