如何用css反转wave svg？
如何用css反转wave svg？
提问于 2019-05-16 09:59:03
我创建了一个带有背景图像和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路径中的一些数字，但没有成功。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-16 15:08:29
为了反转波形，你需要对其进行缩放。例如，您的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>
Ans您可以使用此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>
或者你可以用CSS来转换.herobanner：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56159782
复制相关文章
相似问题