` <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
<stop offset="0" style="stop-color:#4D75B1" />
<stop offset="0.1138" style="stop-color:#4C7BB0" />
<stop offset="0.2617" style="stop-color:#4A8BAD" />
<stop offset="0.4278" style="stop-color:#46A6A7" />
<stop offset="0.5117" style="stop-color:#44B6A4" />
<stop offset="0.9093" style="stop-color:#6DCFBA" />
<animate attributeName="offset" dur="20s" values="0;1;0"
repeatCount="indefinite" />
<stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon display"none" fill="url(#SVGID_1_)" points="49.498,91.095 79.75,91.095 91.515,142.356 103.699,91.095 132.27,91.095 141.934,136.894 158.742,91.095 199.076,91.095 230.591,188.994 155.238,188.994 162.38,167.986 195.294,167.986 177.931,110.704
150.898,188.994 129.191,188.994 115.607,135.212 101.322,188.992 73.592,188.992 " />
<polygon class="wdgreyAnim" fill="#828282" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
</svg>`
我有这样的代码通过svg一个多边形是灰色而另一个是彩色的。 我需要像彩色渐变色这样的效果应该是动画的，这样它应该感觉像灰色标志上的水填充（波浪）。 对于彩色多边形我给定属性显示无。 Jsfiddle