3

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

问题的改进版本：“我如何获得一个以填充设定的宽度并根据 Safari 中的纵横比计算高度？” （感谢弗罗兹）

相关代码：

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 和滚动条。我究竟做错了什么？

4

3 回答 3

6

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

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

我不得不在文本编辑器中打开 SVG，并将 svg 节点的高度属性从 79.999px 舍入到 80px。不知何故，Safari5 不喜欢这些字段中的奇数。

于 2014-01-30T12:37:32.553 回答
3

您在 Safari 中获得滚动条是因为：

  1. height="100%"就是object让它和身体一样高，并且
  2. 因为<object>默认情况下display:inline您会在对象下方获得额外的基线（4px-6px）。100% + 任何东西都比窗口高，因此会显示一个滚动条。

如果你能清楚你想要的最终演示文稿是什么——特别是你的高度应该是多少<object>——我可以帮助你让它跨浏览器工作。

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


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

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

于 2012-04-05T15:14:30.330 回答
1

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

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

于 2015-04-19T21:30:13.593 回答