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

Safari在以下场景中如何确定输出svg的大小;Safari如何计算svg对象的大小？

SVG代码

viewBox 0 0 800 800 
height 100% 
width 100%

CSS

svg width 100% 
containing div width 60%

Safari的输出比屏幕的60％更小的SVG，确定这是一个错误。但是什么决定了这个更小的svg的大小，它与我所能想到的任何东西都没有关系。

只给一些背景资料。 Safari需要px的宽度和高度才能做到你想要的。％不工作。但它确实输出了svg，所以它必须在其大小的某个地方作出决定。

来源

2012-04-23 Gamemorize

是那个伪代码？ – mihai 2012-04-23 20:37:23

只是说相关性作为一个例子，我的代码不会有很多工作要做的Safari是如何工作的？ – Gamemorize 2012-04-23 21:32:20

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

你需要做的是：

一）不要声明明确的高度或宽度在SVG文件。如果您的图形编辑器正在生成它们，请手动进入并删除它们。根据spec，如果未指定宽度和高度，则假定值为100％，因此您的伪代码最好是冗余的。

二）确保您设置在CSS中的SVG元素的显式高度。我建议开发人员或金丝雀版本的Chrome用于故障排除响应式svg大小调整，因为Chrome 18开发工具中有一个bug已经修复。一旦你在Chrome中使用它，它几乎肯定也会在Safari中运行。

C）弄清楚要如何设置preserveAspectRatio和手动编辑SVG放于声明。

如果您仍然遇到问题，请张贴的jsfiddle。其他人评论容易得多。

来源

2012-05-29 18:30:43 Ben

删除宽度从 2013-06-23 09:57:24

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

回答

相关问题