我正在使用几个库在浏览器中生成SVG图像，这些图像可以通过svgexport从服务器弹出，以用户指定的分辨率生成PNG或JPEG . （这可以按预期工作 . ）
我想为用户提供下载SVG的选项，该SVG将被转换为转换，其分辨率用于设置宽度和高度属性 . 当我这样做时，视图框不会缩放到指定的宽度和高度，但会被填充，以便图像占据左上角的原始大小区域 .
在寻找解决方案时，我在W3C文档中找到了说明问题的图像 . 如果您在Chrome中打开这些图像并使用检查器更改宽度和高度属性，
-
ViewBox.svg将展开以填充宽度和高度（从here链接）
-
PreserveAspectRatio.svg将被填充以保持在左上角（从here链接）
这似乎与 preserveAspectRatio 属性的存在或值或 svg 标记的嵌套无关 . 我的文件在Chrome / Chromium，Firefox，Safari / WebKit，Opera，Inkscape和Gapplin中呈现为填充而非缩放 .
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
1 回答
当输入
viewbox而不是viewBox时，视口框不会缩放; svg属性名称区分大小写 .第二个链接没有viewBox属性，添加viewbox（小写）属性无效 .