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屋!