SVG视图总是相对于它的大小？

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。

因此，视图框的编号：442.533将始终表示图像宽度/高度的100％。

如何设置此默认视图框号码？此视图框大小是由导出文件时的大小决定的吗？我希望有一个像viewBox="0 0 16 16"更圆润的viewBox。

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

Answer 1

没有默认的viewBox号码。它是在创建svg图像时定义的（手动或使用像illustrator这样的软件）。它有4个坐标x y width height。让它变得棘手的是这些坐标与图像尺寸无关，就像你提到的那样，它只定义了你所在的区域＆＃34;翻阅＆＃34;。

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

从文档中查看svg transform。 This教程对于理解svg转换也很有用。

如果您使用的是类似插图画家的软件，您只需设置定义视图框的画板尺寸，然后相应缩放。