SVG水平渐变动画答案

【问题标题】：SVG horizontal gradient animationSVG水平渐变动画
【发布时间】：2015-02-13 08:43:09
【问题描述】：

我已经创建了小提琴

<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:#828282" />
    <animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
    <stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon class="wdgreyAnim" fill="url(#largeGradient)" 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 " />
<defs>
    <linearGradient id="largeGradient" x2="100%">
        <stop offset="0%" stop-color="#4c7eaf"></stop>
        <stop offset="25%" stop-color="#4a8eac"></stop>
        <stop offset="50%" stop-color="#46a5a7"></stop>
        <stop offset="75%" stop-color="#53bfac"></stop>
        <stop offset="100%" stop-color="#828282"></stop>
        <animate attributeName="x2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
    </linearGradient>
</defs>

动画是垂直移动的，但我希望它水平移动。我无法做到这一点。有人请帮帮我我的困惑是渐变就像垂直的。如何为不同颜色和动画设置带有偏移量的停止标记。并且在动画标签中。如果我使用冻结而不是重复计数属性，它将采用全单色，但我希望它填充渐变，即它如何动画。如果动画像从下到上的波浪一样更好。（液体填充效果） JSfiddle

为动画后我需要的最终图像添加了 svg 代码

<?xml version="1.0" encoding="utf-8"?>

js fiddle updated

动画运动是从下到上，渐变颜色应该是从左到右。我也需要像水波一样动画

【问题讨论】：

如果渐变从上到下并且您从左到右对其进行动画处理，那么任何可见的东西都不会改变。
至少我需要从下到上的波浪状动画，它应该感觉像水填充玻璃效果
真的不清楚你想要什么。
我又添加了一个 js fiddle（即 JS fiddle 更新）。请查看一下。图像左侧为深蓝色，右侧为浅蓝色。完成动画后，图像应该是这样的（即更新了 JS fiddle）。但动画运动应该从下到上加载。问题是如何从左到右添加渐变颜色，想要的动画运动是从下到上
我有我想要的 gif 图像。但如果没有十个声誉，我不能在这里发布图片

标签： animation svg polygon linear-gradients

【解决方案1】：

你的意思是这样吗？我刚刚使用 y2 而不是 x2

<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">
    <polygon class="wdgreyAnim" fill="url(#largeGradient)" 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 " />
    <defs>
        <linearGradient id="largeGradient" x2="0" y2="100%">
            <stop offset="0%" stop-color="#4c7eaf"></stop>
            <stop offset="25%" stop-color="#4a8eac"></stop>
            <stop offset="50%" stop-color="#46a5a7"></stop>
            <stop offset="75%" stop-color="#53bfac"></stop>
            <stop offset="100%" stop-color="#828282"></stop>
            <animate attributeName="y2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

【讨论】：

感谢您的帮助。