SVG 视图框并不总是缩放到宽度和高度

Question

我正在使用几个库在浏览器中生成 SVG 图像，这些图像可以通过svgexport 从服务器反弹，从而以用户指定的分辨率生成 PNG 或 JPEG。 （这按预期工作。）

我想为用户提供下载用于转换的 SVG 的选项，其中分辨率用于设置宽度和高度属性。当我这样做时，视图框不会缩放到指定的宽度和高度，而是被填充以使图像占据左上角的原始大小区域。

在寻找解决方案时，我在 W3C 文档中找到了说明问题的图像。如果您在 Chrome 中打开这些图像并使用检查器更改宽度和高度属性，

• ViewBox.svg 将扩展以填充宽度和高度（链接自 here）
• PreserveAspectRatio.svg 将被填充以留在左上角（链接自 here）

这似乎与preserveAspectRatio 属性的存在或值或svg 标记的嵌套无关。我的文件在 Chrome/Chromium、Firefox、Safari/WebKit、Opera、Inkscape 和 Gapplin 中呈现为填充而不是缩放。

如何确保我的 SVG 被缩放而不是填充以填充宽度和高度？

Answer 1

当输入为viewbox而不是viewBox时，视图框不会缩放； svg 属性名称区分大小写。

第二个链接没有viewBox属性，加上viewbox（小写）属性没有效果。