svg实现光环波纹效果

效果dome：

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<g id="svg_4">
<g>
<ellipse ry="50" rx="50" id="svg_1" cy="189.8" cx="259.4" stroke-width="10" stroke="#ff0000" fill="#fff"/>
<animate id='ani1' attributeName='stroke-opacity' attributeType='XML' begin='0s;ani2.end' dur='2s' from='1' to='0' fill='freeze'/>
<animate id='ani2' attributeName='stroke-opacity' attributeType='XML' begin='ani1.end' dur='2s' from='0' to='1' fill='freeze'/>
</g>
<g>
<ellipse ry="30" rx="30" id="svg_2" cy="189.3" cx="259.9" stroke-width="10" stroke="#ff0000" fill="#fff"/>
<animate id='ani3' attributeName='stroke-opacity' attributeType='XML' begin='0s;ani4.end' dur='2s' from='0' to='1' fill='freeze'/>
<animate id='ani4' attributeName='stroke-opacity' attributeType='XML' begin='ani3.end' dur='2s' from='1' to='0' fill='freeze'/>
</g>
<g>
<ellipse ry="15" rx="15" id="svg_3" cy="188.8" cx="259.4" stroke-opacity="null" stroke-width="10" stroke="#ff0000" fill="#56ffff"/>
<animate id='ani5' attributeName='fill-opacity' attributeType='XML' begin='0s;ani6.end' dur='2s' from='1' to='0' fill='freeze'/>
<animate id='ani6' attributeName='fill-opacity' attributeType='XML' begin='ani5.end' dur='2s' from='0' to='1' fill='freeze'/>
</g>
</g>
</g>
</svg>

1.通过svg在线编辑器画出基础的样式。（连个线条为红色的圆环包围一个线条为红色填充蓝色的园）

2.分别给圆环和圆添加animate属性。

　　2.1 “attributeName='fill-opacity”改变填充色；

　　2.3 “attributeName='stroke-opacity'”改变线条样式；

　　2.3 “ begin='0s;ani6.end' dur='2s' from='1' to='0' ”样式改变的时间设置，以及效果设置。

 

转载于:https://www.cnblogs.com/wxx-17-5-13/p/9336004.html