logo标签列表

Safari滚动条和SVG

safarisvg
3
问题：Safari不支持渲染我的SVG图像，并带有滚动条。
改进后的问题版本：“如何让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并带有滚动条。我做错了什么吗？

1
请注意，你的 HTML 元素声明了一个 XHTML 命名空间，但使用的是 HTML4 DOCTYPE。（而且，由于未关闭的 meta 标签，你的内容显然不是 XHTML。） - Phrogz
@Phrogz 谢谢，我会更新 doctype。如果想看到这个问题的实际情况，可以在我查看它的同时在这里查看（这个网站将来应该会有其他 SVG，如果人们想看最终的源代码） www.gamemorize.com - EnglishAdam
W/H 被设为 100%，以确保所有的 SVG 都被渲染，但我现在已经将其删除，而且没有任何影响。我希望该对象填充其分配的 CSS 宽度的 100%，然后保持比例，使高度等于宽度。Safari 似乎分配了一个固定的高度。请注意当窗口缩小/缩放时滚动条的高度。 - EnglishAdam
1
好的，那么这是一个单独的问题。 “如何在Safari中使<object>填充设置的宽度并根据纵横比计算高度？” 如果您查看我的“固定”版本（设置宽度但不设置高度），则会发现它在FF和Chrome中可以适当地调整大小。 - Phrogz
其实我现在记起为什么我在对象上指定了宽/高...没有指定宽度时，我的安卓手机不显示任何图像。高度只是明显错误的，只会制造问题。 - EnglishAdam
1
根据我的示例XHTML，指定宽度而不是高度可能是您想要做的。为了解决Safari的问题（除非您实际上提出一个问题并找到更好的答案），我建议添加一些JavaScript代码，使高度与宽度相同（给定您的1：1纵横比）。 - Phrogz
3个回答
6
我在Windows上使用Safari5时遇到了与SVG相关的类似问题，出现了没有明显原因的滚动条。
我在这里找到了解决方法：https://dev59.com/qVfUa4cB1Zd3GeqPL97a#8025526 ：
我不得不在文本编辑器中打开SVG，并将SVG节点的高度属性从79.999px四舍五入为80px。不知何故，Safari5不喜欢这些字段中的奇数。
3
您在Safari中出现滚动条是因为：
  1. object上的height="100%"使其与主体一样高，且
  2. 由于<object>默认为display:inline，因此在对象下方会有额外的基线（4px-6px）。100% + 任何值都比窗口高，因此会显示滚动条。
如果您能明确说明最终呈现的内容，特别是您的<object>应该是多高，我可以帮助您实现跨浏览器的效果。
最可能的情况是您想要通过CSS设置<object>的display:block，并/或者从<object>中删除height="100%"。（如果您想要跨浏览器的高度控制，请通过CSS而不是展示属性来设置高度。）
您可以在以下链接看到我的失败测试的注释示例：
http://phrogz.net/svg/svg_via_object.html
以及修复后的版本：
http://phrogz.net/svg/svg_via_object.xhtml （使用HTML4与XHTML无关问题或解决方案。）
关于高度问题，我希望对象的高宽比例保持不变。在我的实际版本中，高度为800像素，宽度为792像素。 - EnglishAdam
1
@AdamNarbutt 是的，这似乎是Safari的一个缺陷，当窗口被调整大小且页面中没有内容强制使用特定高度时，它无法正确地重新计算基于高度的元素。 - Phrogz
你一年前回答了类似的问题；https://dev59.com/1W035IYBdhLWcg3wErvM - 这帮助我在其他浏览器上实现了很好的缩放，但在Safari上没有。在Chrome中发生了什么？ - EnglishAdam
感谢您的帮助，抱歉一开始表述可能不够清晰，很遗憾这是Safari浏览器的一个bug（可以轻松解决）。谢谢！ - EnglishAdam
1
两个示例在当前（7.0）Safari中看起来完全相同（即它们似乎已经修复了这个错误）。 - akauppi
显示剩余3条评论
1

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接