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

【问题标题】：How does Safari calculate size of svg objects?Safari 如何计算 svg 对象的大小？
【发布时间】：2012-05-30 02:30:43
【问题描述】：

在以下场景中，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，因此它必须在某个地方对其大小做出决定。

【问题讨论】：

仅以相关属性为例，我的代码与 Safari 的工作原理没有太大关系...

标签： safari svg

【解决方案1】：

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

你需要做的是：

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

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

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

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

【讨论】：