Как инвертировать волну SVG с CSS?

Question

Я создал баннер героя с фоновым изображением и SVG, который создает волновой эффект, накладывающийся на изображение.

Но я не знаю, как инвертировать эту волну, я хочу изменить стороныдолина и ее пик.

<section class="herobanner"></section>

.herobanner {
    height:100vh; 
    background: 
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" width="2000" ><path d="M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z"  fill="white" stroke="rgba(255,255,255,1)" stroke-width="2"/></svg>') bottom, 
  url('../images/bg/herobanner3.jpg') center/cover;

}

Я пытался изменить некоторые числа в пути svg, но у меня ничего не получилось.

Answer 1

Чтобы инвертировать волну, вам нужно ее масштабировать. Например, ваш svg это:

svg{border:1px solid;transform:scale(-1,1)}

<svg viewBox="0 45 64 19" ><path d="M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z"  stroke="red" /></svg>

В качестве альтернативы, вместо CSS вы можете использовать презентационные атрибуты:

<svg viewBox="0 45 64 20" ><path transform="scale(-1,1) translate(-64,0)" d="M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z"  stroke="red" /></svg>

И вы можете использовать этот элемент SVG в качестве фона:

.herobanner {
  border:1px solid;
  height:100vh; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 45 64 20'%3E%3Cpath transform='scale(-1,1) translate(-64,0)' d='M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z' stroke='red' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
}

<section class="herobanner"></section>

Или вы можете преобразовать .herobanner с помощью CSS:

.herobanner {
  border:1px solid;
  height:100vh; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 45 64 20'%3E%3Cpath  d='M0 48 C30 60 38 40 64 48 L64 64 L0 64 Z' stroke='red' /%3E%3C/svg%3E");
  background-repeat:no-repeat;
  transform:scale(-1,1)
  }

<section class="herobanner"></section>