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

Question

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

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

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

• ViewBox.svg将扩展以填充宽度和高度（从此处链接）
• PreserveAspectRatio.svg将被填充以留在左上角（从这里链接）

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

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

Answer 1

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

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