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

Question

我的 svg wave 有问题。我需要将它旋转 90 度并使其在侧面 div 的整个屏幕高度。如果它尝试转换旋转 90 度，它会变得非常小，而且我似乎也无法通过 flex 将它放在屏幕左侧。有人可以帮我弄这个吗？谢谢！

@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>

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

How to rotate svg and place it on the left of the screen?

html

css

svg

sidebar