How to achieve blinking effect in svg?

Question

This is my cars Back light elements that is grouping together. I want to set that grouped element to blinking Red color effect Please Help me.

<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
				"/>

Answer 1

Here is an example of blinking animation: 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>

The animate element is what you need.

Answer 2

You can also use CSS: http://jsfiddle.net/aruqen/yrqjo6k8/10/

<svg width="400" height="400" viewBox="0 0 400 400">
  <g>
    <rect fill="#FFFFFF" stroke="#000" x="50" y="50" width="150" height="150" />
    <rect fill="#FFFFFF" stroke="#000" x="200" y="200" width="150" height="150" />
  </g>
</svg>

@keyframes blink {
  100%,
  0% {
    fill: #500;
  }
  60% {
    fill: #f00;
  }
}

g rect {
  animation: blink 0.8s infinite;
}

Answer 3

Making something "blink" using SVG requires it to be transparent part of the time, and have a certain fill at another time. You can achieve that with SVG SMIL animations by using the calcMode="discrete" attribute that will make the animation change the fill attribute to either filled or transparent but not anything in between (tweening).

<rect fill="transparent" width="10" height="10">
  <animate
    attributeName="fill"
    values="#cccccc;transparent"
    begin="0s"
    dur="2s"
    calcMode="discrete"
    repeatCount="indefinite"
  />
</rect>