如何旋转svg并将其放置在屏幕的左侧？

Question

我的svg波浪有问题，我需要把它旋转90度，让它在侧边的div上占据整个屏幕的高度。如果它试图转换旋转90度，它变得非常小，我似乎不能让它在屏幕左侧的Flex aswell。有人能帮我解决这个问题吗？谢谢!

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');

* {
  font-family: 'Baloo 2', cursive;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #2F2F2F;
  height: auto;
  overflow-y: hidden;
  overflow-x: hidden;
}

.container {
  border: red solid;
  width: 100%;
  height: 100%;
}

.wave-side {
  border: green solid;
  width: 20%;
  height: 1000px;
}

.svg-wave {
  transform: rotate(90deg);
}

<div class="container">
  <div class="wave-side">
    <svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#770087" fill-opacity="1" d="M0,256L60,261.3C120,267,240,277,360,256C480,235,600,181,720,138.7C840,96,960,64,1080,42.7C1200,21,1320,11,1380,5.3L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">       </path>
      <path fill="#B300B3" fill-opacity="1" d="M0,192L60,202.7C120,213,240,235,360,208C480,181,600,107,720,96C840,85,960,139,1080,133.3C1200,128,1320,64,1380,32L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">       </path>
    </svg>
  </div>
</div>

Answer 1

最简单的方法是旋转SVG的内容--在SVG内部--而不是试图将其作为一个HTML元素进行大小和旋转。

然后还可以设置 preserveAspectRatio="xMinYMin meet" 这样，如果SVG的宽度超过内容，它就会停留在SVG的左上方。

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');

* {
  font-family: 'Baloo 2', cursive;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #2F2F2F;
  height: auto;
  overflow-y: hidden;
  overflow-x: hidden;
}

.container {
  border: red solid;
  width: 100%;
  height: 100%;
}

.wave-side {
  border: green solid;
  width: 20%;
  height: 1000px;
}

.svg-wave {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="wave-side">
    <svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 1440" preserveAspectRatio="xMinYMin meet">
      <g transform="rotate(90) translate(0 -320)">
        <path fill="#770087" fill-opacity="1" d="M0,256L60,261.3C120,267,240,277,360,256C480,235,600,181,720,138.7C840,96,960,64,1080,42.7C1200,21,1320,11,1380,5.3L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">       </path>
        <path fill="#B300B3" fill-opacity="1" d="M0,192L60,202.7C120,213,240,235,360,208C480,181,600,107,720,96C840,85,960,139,1080,133.3C1200,128,1320,64,1380,32L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">       </path>
        </g>
    </svg>
  </div>
</div>