如何缩放 SVG 图像以填充浏览器窗口？

发布于 2024-10-31 21:49:10 字数 670 浏览 1 评论 0原文

这看起来应该很容易，但我只是没有得到什么。

我想制作一个包含单个 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>

但是，这是放大到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。

我缺少什么？

原文

This seems like it ought to be easy, but I'm just not getting something.

I want to make an HTML page containing a single SVG image that automatically scales to fit the browser window, without any scrolling and while preserving its aspect ratio.

For example, at the moment I have a 1024x768 SVG image; if the browser viewport is 1980x1000 then I want the image to display at 1333x1000 (fill vertically, centred horizontally). If the browser was 800x1000 then I want it to display at 800x600 (fill horizontally, centred vertically).

Currently I have it defined like so:

<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>

However this is scaling up to the full width of the browser (for a wide but short window) and producing vertical scrolling, which isn't what I want.

What am I missing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千鲤 2024-11-07 21:49:10

怎么样：

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% }

我的网站上有一个示例（大致）使用了这种技术，尽管周围有 5% 的填充，并使用 position:absolute 而不是 position:fixed：
http://phrogz.net/svg/svg_in_xhtml5.xhtml

（使用 position:fixed 可以防止链接到页面上的子页面锚点的极端情况，而 overflow:hidden 可以确保不会出现滚动条（如果您有额外内容。）

How about:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

Or:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

I have an example on my site using (roughly) this technique, albeit with 5% padding all around, and using position:absolute instead of position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Using position:fixed prevents a very edge-case scenario of linking to a sub-page anchor on the page, and overflow:hidden can ensure that no scroll bars ever appear (in case you have extra content.)

回复收藏 0 原文

别低头，皇冠会掉 2024-11-07 21:49:10

我想为那些需要 svg 适合宽度和高度而不保留纵横比的人添加preserveAspectRatio =“none” - 例如

<svg id="burgerCover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 745.45 704.55" preserveAspectRatio="none">
  <defs>
    <style>
      .cls-1{
        fill:#d8e720;
      }
    </style>
  </defs>
  <path class="cls-1" d="M0,0H745.45V593.18s-133,112.46-372.72,111.37C122.73,703.41,0,593.18,0,593.18Z"/>
</svg>

I want to just add for those needing to have an svg fit both the width and the height without preserving the aspect ratio add preserveAspectRatio="none" -- e.g.

<svg id="burgerCover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 745.45 704.55" preserveAspectRatio="none">
  <defs>
    <style>
      .cls-1{
        fill:#d8e720;
      }
    </style>
  </defs>
  <path class="cls-1" d="M0,0H745.45V593.18s-133,112.46-372.72,111.37C122.73,703.41,0,593.18,0,593.18Z"/>
</svg>

回复收藏 0 原文

~没有更多了~