将方形svg放置在屏幕的中央，并对其进行缩放以适合屏幕的宽度和高度，并具有一些限制 [英] Place square svg to the center of the screen, scale it to fit the screen's width and height with some constraints

问题描述

这似乎是一个愚蠢的问题，并且可能是一个骗子，但我有一段时间找不到很好的解决方案，所以终于敢问.

It seem to be a silly question and possibly a dupe, but I couldn't find a good solution for a while, so finally dare to ask.

我想在HTML文档中放置一个<svg>元素并满足以下要求:

I want to place an <svg> element inside an html document and satisfy the following requirements:

1. 图像放置为<svg> html5元素，而不是外部svg文件. (实际上，我想用D3.js动态生成它.)
2. 图像垂直和水平放置在屏幕中央.
3. 图片的实际大小不应超过某些预定义的值(例如15cm × 15cm).
4. 如果当前屏幕的宽度或高度小于15cm，则应按适合屏幕的方式缩放图像(保留宽高比).图像的任何部分都不应剪切.图片应放在中间.

1. Image is placed as an <svg> html5 element, not an external svg-file. (Actually, I want to dynamically generate it with D3.js.)
2. Image is placed in the center of the screen, both vertically and horizontally.
3. Actual size of the image should not exceed some predefined value (like 15cm × 15cm).
4. If either current screen's width or height is less then 15cm, image should be scaled (preserving aspect ratio) in such a way it fit to screen. No parts of the image should be clipped. Image should be placed in the center.

与本文中所述的要求基本相同.它说我应该使用preserveAspectRatio="xMidYMid"，但没有给出有关如何执行以及如何与本文中描述的其他技巧相对应的示例. 本文建议preserveAspectRatio="xMidYMid meet"，但我又不是能够复制那里提供的示例以满足我的所有要求.

It's basically the same requirements as described in this article. It says that I should use preserveAspectRatio="xMidYMid", but gives no example on how to do it and how does it correspond to other tricks described in the article. This article suggests preserveAspectRatio="xMidYMid meet", but again I wasn't able to reproduce the examples provided there to meet all my requirements.

我当前的代码是这样的，但是它的高度不合适并且不能垂直居中.

My current code is like this but it does not fit in height and does not center vertically.

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

<div class="svg-container">  
<svg id="picture" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
  <circle cx=50 cy=50 r=50></circle>
</svg>
</div>

推荐答案

如果指定了SVG的宽高比，则可以使用以下方法.我相信，如果SVG的长宽比是动态的，则必须使用JavaScript.

The following works if the aspect ratio of the SVG is a given. If the aspect ratio of the SVG is dynamic, you have to use JavaScript, I believe.

此代码段可在现代浏览器中使用，并充分利用了相对较新的vmin 很好.对于水平和垂直居中，请 flexbox 布局模式被利用.同样，浏览器支持很好.

This snippet works in modern browsers and takes full advantage of the relatively new vmin viewport-percentage length. Browser support is pretty good. For horizontal and vertical centering, the flexbox layout mode is leveraged. Again, browser support is pretty good.

诀窍是SVG的尺寸是相对于屏幕的宽度或高度(以最小者为准)设置的.这意味着即使我们将其设置为100vmin，也可以保证SVG可以适合屏幕(但几乎不适合).要强制使用最大尺寸，请使用旧的 max-width 和 max-height 完全相同旨在使用.

The trick is that the dimensions of the SVG are set relative to either the width or the height of the screen, whichever is smallest. This means that even when we would set it to be 100vmin, the SVG is guaranteed to fit the screen (but barely). To enforce maximal dimensions, good old max-width and max-height are used, exactly as they are intended to be used.

html, body {
  /* ensure that all of the viewport is used */
  width: 100%;
  height: 100%;
  /* ensure that no scrollbars appear */
  margin: 0;
  padding: 0;
  
  /* center SVG horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

#picture {
  /* ensure 1:1 aspect ratio, tweak 50 to make SVG larger */
  width: 50vmin;
  height: 50vmin;  
  /* set some maximum size (width and height need to match
   * aspect ratio, 1:1 in this case */
  max-width: 200px;
  max-height: 200px;
}

<svg id="picture" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>

这篇关于将方形svg放置在屏幕的中央，并对其进行缩放以适合屏幕的宽度和高度，并具有一些限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！