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

Question

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

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

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

除了在加载/调整大小时使用 JS 调整 SVG 的大小外，有谁知道我是否可以做任何其他事情来使 Safari 正常运行？可以发誓我几周前就想通了，但现在我似乎又遇到了这个问题。

score 13 · Accepted Answer

因此，Sérgio Lopez 对此有了答案。您可以使用 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;
}

1 回答 1