[006]-svg实现花朵

效果预览

https://codepen.io/strugglingBoy/pen/jeGJxZ

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/028-abstract-flower

---

代码解读

每个花朵由6个6边形组成，每个6边形由6个折角形成

每一圈的结构，use相当于是复制元素的意思(用xlink:href来指定复制的元素)

<use xlink:href="#c1" />
<use xlink:href="#c1" transform="rotate(60 160 160)" />
<use xlink:href="#c1" transform="rotate(120 160 160)" />
<use xlink:href="#c1" transform="rotate(180 160 160)" />
<use xlink:href="#c1" transform="rotate(240 160 160)" />
<use xlink:href="#c1" transform="rotate(300 160 160)" />

每一圈的动画，svg中用animate来写动画，attributeName表示需要被改变的值，values表示该值各个阶段的变化，dur表示动画的长度，repeatCount表示动画执行的次数，begin表示延迟的时间。

这里的values里的路径值是用的是小m(相对路径的意思) ,相对前一个点,这里的begin相当于css3中的animation-delay，延迟的意思，svg中的延迟函数相比css3厉害的地方是，svg中可以这样子写begin:click+1s,元素点击后的1秒才执行，svg称这数值为event value

<path id="c1" stroke="red">
	<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s"
	repeatCount="indefinite" />
	<animate attributeName="stroke-width" values="0;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin" />
path>

最后只要6层的结果，然后在用use复制就可以了，defs相当于模版的意思，并不会在页面上显示，所以才要用use来复制每一个的结构

用use进行复制（叫重用也好，你们自己喜欢）

总结

需要一定的svg动画的基础，详情请了解