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

【问题标题】：How to rotate svg and place it on the left of the screen?如何旋转 svg 并将其放置在屏幕的左侧？
【发布时间】：2020-04-23 10:16:26
【问题描述】：

我的 svg 波形有问题。我需要将它旋转 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>

【问题讨论】：

标签： html css svg sidebar

【解决方案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>

【讨论】：