SVG视框并不总是按比例缩放到宽度和高度

Question

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

我希望为用户提供下载SVG的选项，该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（小写）属性无效。