Safari 滚动条和 SVG答案

【问题标题】：Safari Scrollbars & SVGSafari 滚动条和 SVG
【发布时间】：2012-04-19 05:01:26
【问题描述】：

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

【问题讨论】：

请注意，您在 HTML 元素上声明了一个 XHTML 命名空间，但是一个 HTML4 DOCTYPE。（而且您的内容显然不是 XHTML，正如未封闭的 meta 标签所示。）
@Phrogz 谢谢，我会更新文档类型。为了查看这个问题的实际效果，它会在我查看它时出现（如果人们想看到最终的源代码，这个站点将来应该有其他 svg）www.gamemorize.com
W/H 设置为 100% 以确保所有 svg 都已呈现，但我现在已将其删除，它没有任何区别。我希望对象填充其分配的 CSS 宽度的 100%，然后保持成比例以给出高度 = 宽度。 Safari 似乎分配了一个固定的高度。注意窗口缩小/放大时滚动条的高度。
好的，那么这是一个单独的问题。 “如何让<object> 填充设置的宽度并根据 Safari 中的纵横比计算高度？” 如果您查看我的“固定”版本（设置宽度但没有高度）你会看到它在 FF 和 Chrome 中适当地调整了大小。
根据我的示例 XHTML，指定宽度而不是高度可能是您想要做的。要解决 Safari 的问题（如果您实际上没有提出问题并找到更好的答案），我只需添加一些 JavaScript 以保持高度与宽度相同（考虑到您的 1:1 纵横比）。

标签： safari svg

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

@Adam 我已经编辑了我的答案，清楚地说明出了什么问题。
嘿 Phrogz，我以前使用过你的想法，它们对我有帮助，但在你的网站上，请注意，如果你放大，Safari 会如何为你提供滚动条。其他任何浏览器都不会出现这种情况。
重新高度。我希望它保持它与对象宽度的比例。在我的实时版本中，它是 800 像素 x 792 像素。
@AdamNarbutt 是的，这似乎是 Safari 中的一个缺陷，当调整窗口大小并且页面中没有强制特定高度的内容时，无法正确重新计算基于高度的元素。
两个样本在当前 (7.0) Safari 中看起来相同（即它们似乎已经修复了错误）。

【解决方案3】：

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

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

【讨论】：