CSS 3或svg波在背景中 [英] CSS 3 or svg wave in a background
问题描述
如何在透明图像背景上创建wave?
布局图像:
img src =https://i.stack.imgur.com/ajZmC.jpgalt =CSS wave>
我需要白色波浪背景。
我略微改进了akshay的答案。
如果长宽比不支持'
t必须保留,则曲线将随宽度变化。http://jsfiddle.net/f6n73avk/2 /
< svg version =1.1xmlns =http://www.w3.org/ 2000 / svgheight =100width =100%viewBox =0 0 90 20preserveAspectRatio =none>
< path d =M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0zfill =blackstroke =transparent/>
< / svg>
选项2
如果必须保留宽高比,则必须对svg元素的高度和宽度使用相同的单位值。
http://jsfiddle.net/o1eghm7v/1/
< svg version =1.1xmlns =http://www.w3.org/2000/svgheight =100%width =100%viewBox =0 0 90 20>
< path d =M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0zfill =blackstroke =transparent/>
< / svg>
看到这里我使用的宽度和高度都为100%。要更改颜色,您必须更改填充
属性的值。
此外,我已使用绝对路径命令
M
strong> - 命令将绘图点移动到其后指定的坐标,或0,5(SVG坐标系)H 线到当前点(0,5)的指定X坐标
C 绘制立方贝塞尔曲线,将第一个点坐标作为第一个句柄,第二个第二手柄,第三个是终点。
S 绘制一个三次贝塞尔曲线,但其第一个句柄是上一个C命令的最后一个句柄
V 绘制垂直线到指定的Y坐标。
Z 关闭路径,即绘制从当前点到最后M点的直线。
How can I build a wave on a transparent image background ?
Layout-Image:
I need the wave in the white top background.
I slightly improved version of akshay's answer. This includes two separate options.
OPTION 1
If aspect ratio doesn't have to be preserved, then the curve will change with width.
http://jsfiddle.net/f6n73avk/2/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
OPTION 2
If the aspect ratio has to be preserved, then we have to use same units value for height and width of svg element.
http://jsfiddle.net/o1eghm7v/1/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
<path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>
See here I used width and height both as 100%. To change the colour you have to change the value of fill
attribute.
Also, I have used absolute path commands as they are simpler to edit.
Explanation
M - command moves the drawing point to the the coordinates specified after it, or 0,5 (SVG coordinate system)
H draws Horizontal line to specified X-coordinate from the current point (0,5)
C draws cubic bezier, with first point coords as first handle, second second handle, and third is the end point.
S draws a cubic bezier, but its first handle is the reflection of the last handle of last C command about the end point of last C.
V draws vertical line to specified Y-coordinate.
Z closes the path, ie draws a straight line from current point to last M point.
这篇关于CSS 3或svg波在背景中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!