UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0

Steps to reproduce the problem:
1. Run the below code snippet in chrome, firefox and IE browsers. 

<svg id="container" style="width: 800px; height: 400px;">

<path id="container_svg" fill="#E94649" fill-opacity="1" stroke-width="1" stroke="transparent" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="round" d="M 0 198.33333333333334 L 0 198.33333333333334 C 33.14285714284961 198.09968472079086 66.28571428569921 197.8660361082484 99.42857142857142 198.33333333333334 C 132.57142857142102 198.80063055841828 165.71428571427063 199.9688736211306 198.85714285714283 198.33333333333334 C 231.99999999999244 196.6977930455361 265.14285714284205 192.25846940722928 298.2857142857143 198.33333333333334 C 331.4285714285639 204.4081972594374 364.57142857141355 220.99724874995226 397.71428571428567 198.33333333333334 C 430.8571428571353 175.66941791671437 463.9999999999849 113.75253559296158 497.14285714285717 90.83666666666667 C 530.2857142857067 67.92079774037181 563.4285714285563 84.00594221153479 596.5714285714286 83.3 C 629.7142857142782 82.59405778846521 662.8571428571278 65.09702889423264 696 47.600000000000016 L 696 198.33333333333334 ">

</path>

</svg>

What is the expected behavior?
I have attached the expected output in Expected.png screenshot.

What went wrong?
In chrome browser gradient like color is applied. Only in chrome browser the issue is reproduced, but the issue is not reproduced while running the above code snippet in other browsers(firefox and IE)

Did this work before? N/A 

Chrome version: Version 60.0.3112.90 (Official Build) (64-bit)  Channel: n/a
OS Version: 8.1
Flash Version: 

Help me in resolving this issue in chrome browser as soon as possible.
 

Deleted: chrome.png 31.2 KB

	chrome.png 31.2 KB View Download

Deleted: firefox.png 5.0 KB

	firefox.png 5.0 KB View Download

Deleted: IE.png 4.0 KB

	IE.png 4.0 KB View Download

Deleted: Expected.png 5.0 KB

	Expected.png 5.0 KB View Download