SVG容器在Safari桌面中呈现错误的大小(在Chrome/iOS中为最佳) [英] SVG container renders wrong size in Safari desktop (fine in Chrome/iOS)

问题描述

我以为Safari已经对此进行了排序，但这似乎仍然是一个问题(除非我做的事情显然是错误的).

I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).

我在对象标签内放置了SVG.将其包裹在包含DIV的柔性包装中(例如，将宽度设置为50％).调整大小时，容器高度会像我期望的那样在Firefox，Chrome和Opera中调整，但是在Safari上，容器的高度仍然过高.

I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.

下面是Codepen上的一个示例，以演示，切换至完整尺寸的结果或侧面编辑器"(右下角的按钮)以在Safari中清楚地看到效果:http://codepen.io/benfrain/full/fhyrD

Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD

除了使用JS在加载/调整大小时调整SVG的大小外，还有谁知道我还有其他方法可以使Safari正常运行吗?发誓我几周前就想出了这一点，但现在我似乎又要解决这个问题了.

Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.

推荐答案

SérgioLopez对此有一个答案.您可以采用Thierry Koblentz在此处描述的视频技术的固有比率: http://alistapart.com/article/creating-intrinsic-ratios-for-video .有关此博客文章的更多信息: http://benfra.in/20l

So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l

这是您在CSS中需要的剪切和粘贴代码:

Here is the cut and paste code you need in your 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;
}

这篇关于SVG容器在Safari桌面中呈现错误的大小(在Chrome/iOS中为最佳)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！