Safari如何计算svg对象的大小？

Question

Safari如何确定在以下场景中输出svg的大小;

SVG代码

 viewBox 0 0 800 800
 height 100%
 width 100%

CSS

 svg width 100%
 containing div width 60%

Safari输出的svg比屏幕的60％小得多，好吧这是一个bug。但是什么决定了这个小svg的大小，它与我能想到的任何东西都无关。

只是提供一些背景信息。 Safari需要px中的宽度和高度才能满足您的需求。 ％don-t工作。但它确实输出了svg，所以它必须在某个地方决定它的大小。

Answer 1

这不是你看到的错误。这是正确的行为。默认情况下，浏览器会缩放SVG 视图框（现在注意术语，我们不是在谈论浏览器视口）来填充CSS确定的SVG元素的尺寸。填充行为由SVG preserveAspectRatio属性确定。默认情况下，它设置为meet，这样可以保持整个SVG可见，并保留纵横比。替代方案是slice，它将视图框缩放以覆盖元素，即使这意味着裁剪。 （slice的行为类似于CSS3中的background-size:cover。）

您需要做的是：

a）不要在SVG文件中声明显式高度或宽度。如果你的图形编辑器正在生成它们，只需手动进入并删除它们。根据{{​​3}}，如果没有指定宽度和高度，则假设值为100％，因此您的伪代码最多是多余的。

b）确保为CSS中的svg元素设置显式高度。我建议开发人员或Canary版本的Chrome用于对响应式svg大小进行故障排除，因为Chrome 18开发工具中的spec已经修复。一旦你在Chrome中使用它，它几乎肯定也可以在Safari中使用。

c）弄清楚如何设置preserveAspectRatio并手动编辑svg以放入声明。

如果您仍然遇到问题，请发布一个jsfiddle。其他人评论更容易。