svg寬度不固定,高度固定時,在寬度足夠的時候顯示還算正常,在寬度不足時后邊的不顯示

在寬度足夠的時候,顯示是正常的

寬度縮小后,就不顯示后面的了

示例地址:http://jsrun.net/5xgKp/edit

我想要的是在寬度變化時,高度能保持不變,在不設(shè)置preserveAspectRatio的情況下
縮小后,高度未填滿

放大后,寬度變成固定的了,不能隨著拉寬后,繼續(xù)變大

代碼:

    <div class="controls">
      <div>
        <span class="control">
          aa
        </span>
      </div>
      <div class="timeline">
        <div style="height: 2em">
          <svg width="100%" height="100%" viewBox="0 0 1460 60" preserveAspectRatio="xMinYMax slice">
            <g transform="translate(10,0)">
              <rect x="0" y="0" width="1440" height="100%" fill="#cd0000" />
              <line x1="180" x2="180" y1="0" y2="35" stroke="#fff" />
              <line x1="360" x2="360" y1="0" y2="35" stroke="#fff" />
              <line x1="540" x2="540" y1="0" y2="35" stroke="#fff" />
              <line x1="720" x2="720" y1="0" y2="35" stroke="#fff" />
              <line x1="900" x2="900" y1="0" y2="35" stroke="#fff" />
              <line x1="1080" x2="1080" y1="0" y2="35" stroke="#fff" />
              <line x1="1260" x2="1260" y1="0" y2="35" stroke="#fff" />
              <text x="175" y="55" stroke="#fff">
                3
              </text>
              <text x="355" y="55" stroke="#fff">
                6
              </text>
              <text x="535" y="55" stroke="#fff">
                9
              </text>
              <text x="715" y="55" stroke="#fff">
                12
              </text>
              <text x="895" y="55" stroke="#fff">
                15
              </text>
              <text x="1075" y="55" stroke="#fff">
                18
              </text>
              <text x="1255" y="55" stroke="#fff">
                21
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div>
        <span class="control">
          cc
        </span>
      </div>
    </div>

body {
  margin: 0;
  padding: 0;
}

.controls {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.55);
  display: flex;
  color: white;
}

.controls > .timeline {
  flex-grow: 1;
}

.control {
  margin: 0 10px;
  line-height: 2rem;
  display: inline-block;
  vertical-align: top;
}