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

Question

我的svg wave有问题。我需要把它旋转90度，使它达到屏幕的全高。如果它试图转换旋转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>