animation - 如何在svg中实现闪烁效果?

标签 animation svg

这是我的汽车 组合在一起的背光元素。我想将该分组元素设置为闪烁
红色效果请帮帮我。

<g i:extraneous="self">
		<rect id="_x3C_Slice_x3E_" x="25" y="376" fill="none" width="370" height="179"/>
		<g>
		
		
		<path fill="#FFFFFF" d="M934.067,311.165c12.26,1.315,28.337,3.037,44.412,4.777c0.821,0.089,1.632,0.312,2.437,0.517
				c14.782,3.774,16.479,5.841,16.588,20.831c0.045,6.153-0.094,12.312-0.33,18.462c-0.104,2.691-0.441,5.433-4.343,5.3
				c-12.757-0.435-24.096,3.744-34.514,10.815c-2.962,2.01-5.089,2.588-8.159-0.861c-6.928-7.784-14.555-14.961-22.084-22.191
				c-8.966-8.611-20.62-10.899-32.251-12.689c-9.62-1.481-19.398-1.921-29.04-3.289c-2.269-0.322-5.744-2.283-6.011-3.922
				c-0.309-1.899,1.863-4.823,3.736-6.346c6.921-5.632,15.353-7.756,23.996-8.483C902.341,312.92,916.222,312.277,934.067,311.165z"/>
          
<path fill="#FFFFFF"d="M995.938,362.712c0.686,17.885,10.416,32.693,16.896,48.64c1.773,4.363,3.789,8.627,5.984,13.594
				c-11.115-0.752-20.116-4.749-27.361-11.47c-12.607-11.695-24.51-24.149-37.111-36.686
				C967.094,366.515,980.419,361.753,995.938,362.712z"/>
          
<path fill="#FFFFFF" d="M1015.687,485.421c-0.813,4.715-1.888,9.404-2.351,14.153c-0.34,3.49-2.639,4.195-4.724,3.059
				c-2.714-1.479-5.705-3.691-6.968-6.352c-3.524-7.421-6.233-15.231-9.236-22.897c-2.169-5.538-1.751-6.154,4.18-6.392
				C1008.343,466.518,1015.764,473.82,1015.687,485.421z"/>
          <path fill="#FFFFFF" d="M1005.334,503.453c2.788,0.592,5.757,0.801,8.263,1.988c0.855,0.405,0.547,3.267,0.771,5.006
				c-0.399,0.32-0.798,0.639-1.197,0.959c-2.851-2.272-5.702-4.544-8.554-6.816C1004.857,504.21,1005.096,503.831,1005.334,503.453z
				"/>

最佳答案

下面是一个闪烁动画的例子:http://jsfiddle.net/pLh05ypL/1/

<svg width="320" height="320" viewBox="0 0 320 320">
    <path
        fill="#FFFFFF" stroke="#000"
        d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
        <animate
            attributeType="XML"
            attributeName="fill"
            values="#800;#f00;#800;#800"
            dur="0.8s"
            repeatCount="indefinite"/>
        </path>
 </svg>

animate 元素就是你所需要的。

关于animation - 如何在svg中实现闪烁效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29205294/

相关文章:

android - 将 View 层次结构旋转 90 度

css - SVG 填充 css 变量

flash - 如何在Flash中的时间线上跟踪音频文件的放置

css - 动画持续时间不准确

javascript - 将 SVG 复制到 Canvas 后出现神秘增长

css - SVG 数据图像不能用作伪元素中的背景图像

javascript - 问题 w/Programmatic Zoom v4

c - OpenGL 初学者和 2D 动画项目?

javascript - 我如何在 React Native 中设置滚动动画

html - 使用 -webkit-animation-play-state :paused; not working 暂停 CSS Slide