1

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

SVG 代码

 viewBox 0 0 800 800
 height 100%
 width 100%

css

 svg width 100%
 containing div width 60%

Safari 输出的 svg 比屏幕的 60% 小得多，好吧，这是一个错误。但是是什么决定了这个较小的 svg 的大小，它与我能想到的任何东西都没有关系。

只是提供一些背景信息。Safari 需要以 px 为单位的宽度和高度才能执行您想要的操作。% 不工作。但它确实输出了 svg，因此它必须在某个地方对其大小做出决定。

4

1 回答 1

2

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

你需要做的是：

a) 不要在 SVG 文件中声明明确的高度或宽度。如果您的图形编辑器正在生成它们，只需手动进入并删除它们。根据规范，如果没有指定宽度和高度，则假定值为 100%，因此您的伪代码充其量是多余的。

b) 确保您在 CSS 中为 svg 元素设置了明确的高度。我推荐 Chrome 的开发人员或 Canary 版本来解决响应式 svg 大小问题，因为 Chrome 18 开发工具中存在一个已修复的错误。一旦你让它在 Chrome 中运行，它几乎肯定也可以在 Safari 中运行。

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

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

于 2012-05-29T18:30:43.077 回答