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 - 当用户点击它时用动画改变背景

css - 如何使用 CSS3 转换字体样式?

android - 启动和销毁时动画在 Activity 中无法正常工作

reactjs - 图表上的菜单下拉菜单正在偏移

css - CSS3中自动调整图像效果

Jquery 插入元素,然后通过类更改执行 css 动画 - 不起作用

css - Rect x 和 y 属性在 Firefox 中不起作用

css - 如何使用 2 个不同大小的 SVG 管理笔划

xpath 相对路径不带回任何值

css - 更改伪元素中数据 URI SVG 路径的填充颜色