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

【问题标题】：SVG viewbox always relative to it's size?SVG视图框总是相对于它的大小？
【发布时间】：2017-06-25 23:26:05
【问题描述】：

如果我有这个方形 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。

因此，viewbox 的编号：442.533 始终表示图像宽度/高度的 100%。

这个默认的viewbox编号是怎么设置的？此视图框大小是否由导出时文件的大小决定？我想要一个像viewBox="0 0 16 16" 这样更圆润的视图框。

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

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

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

如果您使用的是 illustrator 之类的软件，您需要做的就是设置定义视图框的画板的尺寸，然后进行相应的缩放。

【讨论】：

这说明了很多。遗憾的是，在大多数 SVG 教程中，这从未真正解释得很好。要么那是常识，要么它被认为是常识，但我与插画家合作的不多。谢谢你的回答。
IMO 这个答案有点令人困惑。 viewBox 没有描述“您正在查看的区域”。 width 和 height 属性可以做到这一点。 viewBox 描述了可以通过width 和height 定义的视口看到的文档区域。
顺便说一句，有办法在你从 illustrator 之类的东西导出后手动设置比例吗？
我强烈反对。说“您正在查看的区域”会更准确。 viewBox 区域中的内容在 SVG 中并不总是可见。
定义的viewbox区域中的东西不是，只应该在svg中可见。