Safari滚动条和SVG [英] Safari Scrollbars & SVG
问题描述
问题:Safari没有发挥作用，正在通过滚动条渲染我的SVG图像.
PROBLEM: Safari is not playing ball and is rendering my SVG images with a scroll bar.
问题的改进版本:如何在Safari中填充宽度并根据Safari的长宽比计算高度? (感谢Phrogz)
Improved version of Question: "How do I get an to fill a set width and have the height calculated based on the aspect ratio in Safari?" (thanks Phrogz)
相关代码:
SVG文件
viewBox="0 0 800 800"
(未指定高度或宽度)
.objectwrapper {
max-width: 600px;
min-width: 150px;
margin-right: auto;
margin-left: auto;
}
.objectdiv {
max-width: 60%;
margin-right: auto;
margin-left: auto;
display: block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
<meta http-equiv="expires" content="0" />
</head>
<body>
<div class="objectwrapper">
<div class="objectdiv">
<object type="image/svg+xml" data="question0optimize1.svg" width="100%" height="100%">
</object>
</div>
</div>
</body>
</html>
在所有其他浏览器中，我尝试使用窗口大小更改和ctrl +缩放来获得很好的平滑缩放.但是Safari为我提供了一个较小的svg和滚动条.我在做什么错了?
In all the other browsers I've tried I get a nice smooth scaling with window size changes and ctrl + zooming. But Safari offers me a smaller svg and scroll bars. What am I doing wrong?
推荐答案
您在Safari中获得滚动条的原因是:
You are getting a scrollbar in Safari because:
-
height="100%"使它与身体一样高，并且 - 由于
<object>的默认值为display:inline，因此您在该对象下方获得了另一个基线(4px-6px). 100％+任何东西都比窗口高，因此会显示一个滚动条.
object上的height="100%"on theobjectis making it as tall as the body, and- Because the
<object>defaults todisplay:inlineyou get an additional baseline (4px-6px) below the object. 100% + anything is taller than the window, and thus a scrollbar shows.
如果您能清楚地知道最终演示文稿的内容(特别是<object>的高度)，那么我可以帮助您使其跨浏览器工作.
If you can be clear about what you want the final presentation to be—specifically, what should the height be for your <object>—I can help you make it work cross-browser.
您最有可能想要a)通过CSS在<object>上设置display:block，和/或b)从<object>中删除height="100%". (如果需要跨浏览器的高度控制，请通过CSS而不是表示属性来设置高度.)
Most likely you want to a) set display:block on the <object> via CSS, and/or b) remove the height="100%" from the <object>. (If you want cross-browser height control, set the height via CSS, not presentational attributes.)
您可以在
看到我未通过测试的带注释的示例
http://phrogz.net/svg/svg_via_object.html
固定版本为
http://phrogz.net/svg/svg_via_object.xhtml
You can see an annotated example of my failing test at
http://phrogz.net/svg/svg_via_object.html
and the fixed version at
http://phrogz.net/svg/svg_via_object.xhtml
(使用HTML4和XHTML与该问题或修复无关.)
(The use of HTML4 versus XHTML is unrelated to the problem or fix.)
这篇关于Safari滚动条和SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
