Question

问题：Safari没有玩球，而是用滚动条渲染我的SVG图像。

问题的改进版本：“我如何获得填充设定宽度并根据Safari中的宽高比计算高度？” （感谢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和滚动条。我做错了什么？

Answer 1

我在Windows上的Safari5下遇到类似SVG的问题。它显示滚动条没有明显的原因。

在这里为我找到了一个解决方案：https://stackoverflow.com/a/8025526/2244646：

我必须在texteditor中打开SVG并将svg-node的height-attribute从79.999px舍入为80px。不知何故，Safari5不喜欢这些领域的奇数。

Answer 2

您在Safari中收到滚动条，因为：

height="100%"

object使其与身体一样高，
由于<object>默认为display:inline，因此您会在对象下方获得额外的基线（4px-6px）。 100％+任何东西都高于窗口，因此滚动条显示。

如果您可以清楚地了解您希望最终演示文稿的具体内容，那么<object>的高度应该是多少 - 我可以帮助您使其跨浏览器工作。

您很可能希望a）通过CSS在display:block上设置<object>，和/或b）从height="100%"中移除<object>。（如果您想要跨浏览器高度控制，请通过CSS设置高度，而不是表示属性。）

您可以在左侧看到我的失败测试的注释示例 http://phrogz.net/svg/svg_via_object.html
和固定版本 http://phrogz.net/svg/svg_via_object.xhtml

（HTML4与XHTML的使用与问题或修复无关。）

Answer 3

我在Windows上使用Safari时遇到了与SVG相同的问题。 SVG有垂直和水平滚动条。

但是，我在文本编辑器中打开了SVG文件，我有奇怪的高度和宽度属性。我将它们改为偶数，它解决了问题。

Safari Scrollbars＆amp; SVG

3 个答案: