Как повернуть SVG и разместить его в левой части экрана? - PullRequest
Новая
       14

Как повернуть SVG и разместить его в левой части экрана?

1 голос
/ 23 апреля 2020

У меня проблемы с моей SVG-волной. Мне нужно повернуть его на 90 градусов и сделать полную высоту экрана на боковой панели. Если он пытается преобразовать вращение на 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>

1 Ответ

1 голос
/ 23 апреля 2020

Самый простой подход - вращать содержимое 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>
...