问题:Safari没有玩球,而是用滚动条渲染我的SVG图像.
问题的改进版本:"我如何获得填充设定宽度并根据Safari中的宽高比计算高度?" (感谢Phrogz)
相关代码:
SVG文件
viewBox="0 0 800 800"
Run Code Online (Sandbox Code Playgroud)
(没有指定高度或宽度)
.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;
}Run Code Online (Sandbox Code Playgroud)
<!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>Run Code Online (Sandbox Code Playgroud)
在我试过的所有其他浏览器中,我通过窗口大小更改和ctrl +缩放获得了很好的平滑缩放.但Safari为我提供了一个较小的svg和滚动条.我究竟做错了什么?
小智 6
我在Windows上的Safari5下遇到了类似的SVG问题.它显示滚动条没有明显的原因.
在这里为我找到了一个解决方案:https://stackoverflow.com/a/8025526/2244646:
我不得不在texteditor中打开SVG并将svg-node的height-attribute从79.999px舍入到80px.不知何故,Safari5不喜欢这些字段中的奇数.