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

所以,塞尔吉奥·洛佩兹有一个答案.您可以使用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;
}