When the width of svg is not fixed, when the height is fixed, the display is normal when the width is enough, and the rear is not displayed when the width is not enough.

when the width is enough, the display is normal

clipboard.png

,

clipboard.png

:http://jsrun.net/5xgKp/edit

,,preserveAspectRatio
,

clipboard.png

,,,

clipboard.png

Code:

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;
}
Svg
Apr.09,2021

preserveAspectRatio is set to "none"

Menu