SVG 容器在 Safari 桌面中呈现错误的大小（在 Chrome/iOS 中正常）

我以为 Safari 已经解决了这个问题，但它似乎仍然是一个问题（除非我做了一些明显错误的事情）。

我在对象标签内放置了一个 SVG。它被包裹在一个灵活的包含 DIV 中（例如设置为宽度 50%）。在调整大小时，容器高度在 Firefox、Chrome 和 Opera 中按我的预期调整大小，但在 Safari 上容器仍然太高。

下面是 Codepen 上的一个例子来演示，切换到全尺寸结果或“侧面编辑器”（右下按钮）可以在 Safari 中清楚地看到效果：http://codepen.io/benfrain/full/fhyrD http://codepen.io/benfrain/full/fhyrD

除了使用 JS 在加载/调整大小时调整 SVG 大小之外，有谁知道我还能做些什么来使 Safari 正常运行吗？我可以发誓几周前我就已经解决了这个问题，但现在我似乎又遇到了这个问题。

所以，塞尔吉奥·洛佩兹对此有一个答案。您可以采用 Thierry Koblentz 此处描述的视频技术的固有比率：http://alistapart.com/article/creating-intrinsic-ratios-for-video http://alistapart.com/article/creating-intrinsic-ratios-for-video。更多信息请参阅此博文：http://benfra.in/20l http://benfra.in/20l

以下是 CSS 中所需的剪切和粘贴代码：

周围物体标签

object {
    width: 100%;
    display: block;
    height: auto;
    position: relative;
    padding-top: 100%;
} 

这是里面的 SVG：

svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}