极客观点
项目管理
HarmonyOS
我试图在我的 html 页面上放置一个 svg 对象，我希望它具有 100% 的宽度和固定的高度。
在我的小提琴中，您可以看到深灰色对象的高度根据窗口比例而变化。 （这不是我想要的）
http://jsfiddle.net/Lq207ery/6/
HTML
<body>
<!-- HEADER -->
<header>
<div class="logo"></div>
<div class="triangle">
<svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
<g>
<!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
<polyline fill="#CC0000" points="0,0 0,200 300,0 "></polyline>
</g>
</svg>
</div>
<div class="nav">
<svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
<polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
</svg>
</div>
</header>
<!-- CONTENT -->
CSS
body {
margin: 0;
}
header svg {
display: block;
margin: 0;
}
header .triangle {
z-index: 200;
}
header .logo {
margin-top: -90px;
}
header .nav {
position: absolute;
top:0;
left:0;
width:100%;
z-index:-1;
}
原文由 user3703764 发布，翻译遵循 CC BY-SA 4.0 许可协议
viewBox以裁剪到内容的高度。preserveAspectRatio值以具有适当的区分大小写的值，例如xMinYMin（不是xMinYmin）。演示：http: //jsfiddle.net/Lq207ery/8/
如果您希望深灰色三角形拉伸（不保留其纵横比），请改用
preserveAspectRatio="none"。演示：http: //jsfiddle.net/Lq207ery/9/