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

Question

我认为Safari已对此进行了排序，但它似乎仍然存在问题（除非我做了明显错误的事情）。

我有一个放置在对象标签内的SVG。它被包裹在包含DIV的柔性中（例如设定为宽度50％）。在调整大小时，容器高度在Firefox，Chrome和Opera中调整大小，正如我所期望的那样，但在Safari上容器保持太高。

以下是Codepen演示的示例，切换到完整大小的结果或“侧面编辑器”（按钮右下角）以在Safari中清楚地看到效果：http://codepen.io/benfrain/full/fhyrD

除了使用JS在加载/调整大小时调整SVG大小外，是否有人知道我还能做些什么来使Safari正常运行？可能发誓我几周后就会想到这个，但现在我似乎再次遇到这个问题了。

Answer 1

所以，SérgioLopez得到了答案。您可以使用Thierry Koblentz在此描述的视频技术的固有比率：http://alistapart.com/article/creating-intrinsic-ratios-for-video。有关此博客文章的更多信息：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;
}