这似乎是一个愚蠢的问题,可能是一个笨蛋,但我找不到一个很好的解决方案,所以终于敢问.
我想放一个< svg>元素在html文档中,并满足以下要求：
>图像被放置为< svg> html5元素,而不是外部的svg文件. (实际上,我想用D3.js动态生成它)
>图像垂直和水平放置在屏幕的中心.
>图像的实际尺寸不应超过某些预定义值(如15cm×15cm).
>如果当前屏幕的宽度或高度小于15厘米,图像应该按照适合屏幕的方式进行缩放(保留宽高比).图像的任何部分都不应被剪裁.图像应放在中心.
它基本上与this article中描述的要求相同.它表示我应该使用preserveAspectRatio =“xMidYMid”,但不提供如何做到这一点的例子,它如何对应于文章中描述的其他技巧. This article建议preserveAspectRatio =“xMidYMid meet”,但是我再也无法重现提供的示例来满足我的所有要求.
我当前的代码是这样的,但它不适合高度,并不垂直居中.
.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.
此代码段适用于现代浏览器,并充分利用相对较新的vmin viewport-percentage length.浏览器支持为pretty good.对于水平和垂直居中,可以利用flexbox布局模式.浏览器支持也是pretty good.
诀窍是SVG的尺寸相对于屏幕的宽度或高度设置,取其中最小者.这意味着即使我们将它设置为100vmin,SVG也可以保证适合屏幕(但几乎没有).为了实现最大尺寸,使用好的旧max-width和max-height,正如它们旨在使用的那样.
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>
