如何缩放SVG图像以填充浏览器窗口？
|
这似乎应该很容易，但是我没有得到任何东西。
我想制作一个包含单个SVG图像的HTML页面，该图像会自动缩放以适合浏览器窗口，而无需任何滚动并保持其纵横比。
例如，目前我有一个1024x768 SVG图片；如果浏览器视口为1980x1000，则我希望图像以1333x1000显示（垂直填充，水平居中）。如果浏览器是800x1000，那么我希望它以800x600显示（水平填充，垂直居中）。
目前，我的定义如下：
<body style=\"height: 100%\">
<div id=\"content\" style=\"width: 100%; height: 100%\">
<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"
width=\"100%\" height=\"100%\"
viewBox=\"0 0 1024 768\"
preserveAspectRatio=\"xMidYMid meet\">
...
</svg>
</div>
</body>
没有找到相关结果
已邀请:
1 个回复
担每棱绰
html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; bottom:0; left:0; right:0 }html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }而不是： http://phrogz.net/svg/svg_in_xhtml5.xhtml （使用可以防止在极端情况下链接到页面上的子页面锚点，而可确保不会出现滚动条（以防您有多余的内容。）