SOURCE

function change() {
  
  const p1 = document.getElementById('p1');
  const p2 = document.getElementById('p2');
  const preserveAspectRatio = p1.value + " " + p2.value;

  const svg = document.getElementById('svg');
  svg.setAttribute("preserveAspectRatio", preserveAspectRatio);
}

<div class="controls">
  <div>
    <span class="control">
      aa1
    </span>
  </div>
  <div class="timeline">
    <div style="height: 2rem">
      <svg id="svg" width="100%" height="100%" viewBox="0 0 1460 60" preserveAspectRatio="xMinYMin meet">
        <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>
<div>
  <select name="p1" id="p1" onchange="change()">
    <option value="none">
      none
    </option>
    <option value="xMinYMin">
      xMinYMin
    </option>
    <option value="xMinYMid">
      xMinYMid
    </option>
    <option value="xMinYMax">
      xMinYMax
    </option>
    <option value="xMidYMin">
      xMidYMin
    </option>
    <option value="xMidYMid">
      xMidYMid
    </option>
    <option value="xMidYMax">
      xMidYMax
    </option>
    <option value="xMaxYMin">
      xMaxYMin
    </option>
    <option value="xMaxYMid">
      xMaxYMid
    </option>
    <option value="xMaxYMax">
      xMaxYMax
    </option>
  </select>
  <select name="p2" id="p2" onchange="change()">
    <option value="meet">
      meet
    </option>
    <option value="slice">
      slice
    </option>
  </select>
</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;
}