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

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

我在对象标记中放置了一个SVG。包裹在一个灵活的包含DIV（例如设置为50%宽度）中。在resize上，Firefox、Chrome和Opera中的容器高度会按照我的预期调整大小，但在Safari上，容器保持得太高

下面是Codepen上的一个示例，切换到全尺寸结果或“侧边编辑器”（按钮右下角）以在Safari中清楚地看到效果：

---

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

因此，塞尔吉奥·洛佩兹对此有了答案。您可以使用Thierry Koblentz在此处描述的视频技术的固有比率：。更多信息，请访问此博客：

以下是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;
}

---

这救了我的命，非常感谢。这是我的变体-我想您必须根据aspected SVG比率调整padding top？