Safari滚动条和SVG

问题：Safari不是在打球，而是用滚动条呈现我的SVG图像。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 + Zooming。但Safari提供了更小的svg和滚动条。我究竟做错了什么？

来源

2012-04-05 Gamemorize

请注意，您在HTML元素上声明了XHTML名称空间，但是它是HTML4 DOCTYPE。（而且你的内容显然不是XHTML，就像未封闭的'meta'标签一样。） – Phrogz 2012-04-05 14:54:56

@Progrog谢谢，我会更新文档类型。为了解这个问题的实际效果，我会在这里看看它（如果人们希望看到最终的源代码，这个网站应该会有其他的svg）www.gamemorize.com – Gamemorize 2012-04-05 15:01:39

W/H被放在100 ％以确保所有的svg被渲染，但我现在已经删除它，它没有区别。我希望对象填充其分配的CSS宽度的100％，然后按比例保持高度=宽度。 Safari似乎分配了一个固定的高度。请注意当窗口缩小/放大时滚动条的高度。 – Gamemorize 2012-04-05 15:28:47

你得到一个滚动条，在Safari，原因是：

height="100%"在object是使它一样高的身体，
因为<object>默认为display:inline你得到额外的基线（4px-在物体下面。 100％+任何东西都比窗口高，因此滚动条显示。

如果你一定要清楚你想要的最后陈述是，具体是什么，应该高度是什么你<object> -I可以帮助您使它工作跨浏览器。

最有可能您希望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的使用与问题或修复无关。）

来源

2012-04-05 15:14:30 Phrogz

@亚当我已经编辑了我的答案，并详细说明了哪里出了问题。 – Phrogz 2012-04-05 15:26:58

Hey Phrogz，我之前使用过你的想法，他们已经帮助过我，但是在您的网站上，请注意Safari如何放大时为您提供滚动条。其他任何浏览器都不会出现这种情况。 – Gamemorize 2012-04-05 15:33:09

重新高度。我希望它保持它在对象中的宽度的比例。在我的现场版本中，它是800px x 792px。 – Gamemorize 2012-04-05 15:35:41

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

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

我曾在一个文本编辑打开SVG和圆润的SVG节点的高度属性从79.999px到80px。不知何故，Safari5不喜欢这些领域的奇数。

来源

2014-01-30 12:37:32 rejas

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

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

来源

2015-04-19 21:30:13

Safari滚动条和SVG

回答

相关问题