如何用双微旋转SVG实现导航背景？解决缩放及对齐问题

我帮你调整了代码，解决了SVG高度缩放和对齐的问题，同时完全满足你后续用MorphSVG做动画的需求。核心思路是固定SVG的高度，用视窗单位确保背景超出屏幕，同时简化旋转逻辑：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
  <div class="hero-bg"></div>
  <div class="navigation">
    <!-- 优化后的SVG背景 -->
    <svg class="nav-bg-svg" preserveAspectRatio="none">
      <rect class="nav-bg-1" width="100%" height="150" transform="rotate(-0.5) translate(-20px, -15px)" />
      <rect class="nav-bg-2" width="100%" height="150" transform="rotate(0.25) translate(10px, -5px)" />
    </svg>
    <div class="container nav-content">
      <div class="row">
        <div class="col-sm-4 hidden-xs">
          <!-- LOGO -->
        </div>
        <div class="col-sm-8">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.hero-bg { 
  height:20vh; 
  min-height:200px; 
  max-height:350px; 
  width:100%; 
  background:url('http://placehold.it/1920x1080'); 
  background-size:cover; 
}
.navigation { 
  position:relative; 
  height:120px; 
  overflow:hidden; /* 隐藏SVG超出导航容器的部分 */
}
/* 固定SVG高度，确保全屏覆盖 */
.nav-bg-svg {
  position:absolute;
  top:0;
  left:-5vw; /* 向左偏移5%视窗宽度，确保旋转后左侧无空白 */
  width:110vw; /* 宽度设为110%视窗，确保旋转后左右都超出屏幕 */
  height:120px; /* 固定高度，和导航容器一致 */
  z-index:1; /* 确保在导航内容下方 */
}
.nav-bg-1 { 
  fill:red; 
}
.nav-bg-2 { 
  fill:black; 
  opacity:0.8; /* 加个透明度让叠加效果更明显 */
}
.nav-content {
  position:relative;
  z-index:2; /* 确保导航内容在SVG上方，可点击 */
}
.navigation ul { 
  list-style-type:none; 
  padding:0; 
  margin:0; 
  position:absolute; 
  top:50%; 
  transform:translateY(-50%); /* 垂直居中，视觉偏移由SVG旋转自然产生 */
}
.navigation ul > li { 
  display:inline-block; 
  margin-right:20px; /* 加个间距更美观 */
}
.navigation ul > li > a{ 
  color:#fff; 
  text-transform:uppercase; 
  text-decoration:none; 
  font-weight:bold;
}
</style>

关键调整说明： #

1. 固定SVG高度：直接给.nav-bg-svg设置height:120px，和导航容器高度完全一致，彻底解决缩放时高度变化的问题。
2. 全屏覆盖且超出屏幕：用110vw宽度加上left:-5vw，确保SVG旋转后左右边缘都超出屏幕，不会出现空白。
3. 简化旋转逻辑：把旋转逻辑移到SVG内部的transform属性，矩形尺寸设为100%，这样不管屏幕多大都能铺满，后续用MorphSVG调整形状时更灵活。
4. 层级控制：给导航内容设置z-index:2，SVG设置z-index:1，确保链接可点击，不会被SVG遮挡。
5. 兼容MorphSVG：保留了<rect>元素，你可以直接用MorphSVG把它转换成任意路径（比如圆角、波浪边），完全不影响动画效果。

这样修改后，导航背景在任何断点下都保持120px高度，旋转的矩形始终超出屏幕边缘，导航元素垂直居中且视觉偏移符合预期，同时完美支持后续的MorphSVG动画需求。

内容的提问来源于stack exchange，提问作者user13286