UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2667.0 Safari/537.36

Example URL:
http://asamuzak.jp/test/svg_interactive_chrome_issue

Steps to reproduce the problem:
1. Open attached file (text/html).
2. There are 3 demos.
   A. Put pointer (mouse) over 1st circle. Then move out.
   B. Click button for 2nd circle. Then click again.
   C. Click button for 3rd circle. Then click again.

What is the expected behavior?
Every circle should move to right bottom on hover (A) or click event (B, C).
Then go back to center again on pointer out or second click.

What went wrong?
All Circle stays at right bottom.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 51.0.2667.0  Channel: canary
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

When CSS `transform` is once applied in SVG, transform effect remains even after transform value is set to `none`.
Firefox works well.
 

Deleted: svg_interactive_chrome_issue.htm 1.8 KB

svg_interactive_chrome_issue.htm 1.8 KB View Download