svg animate tag issue in Chrome

I wrote a svg code as

<svg xmlns="http://www.w3.org/2000/svg">
   <g display='none'>
       <animate attributeName="display" begin="3.8" dur="0.7" fill="freeze" keyTimes="0;0.1428571429;0.8571428571;1.0000000000" values="inherit;none;inherit开发者_如何学Python;none"/>
       <rect x='100' y='100' width='100' height='100' fill='blue'/>
   </g>
</svg>

This works correctly in Firefox , Opera and Safari but does not work in Google Chrome browser.How do I make this work in Chrome?

The blue rectangle should not be displayed at the end of animation as last value in values attribute is 'none' .

Any help will be highly appreciated.

You could animate opacity attribute instead of display and have the same effect.

using 'inline' instead of 'inherit' it works as supposed

<svg xmlns="http://www.w3.org/2000/svg">
  <g display='none'>
   <animate attributeName="display" begin="3.8" dur="0.7" fill="freeze"     
keyTimes="0;0.1428571429;0.8571428571;1.0000000000" values="inline;none;inline;none"/>
   <rect x='100' y='100' width='100' height='100' fill='blue'/>