Question

我创造了小提琴

<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>

动画是垂直移动但我想让它水平移动。我无法做到这一点。有人请帮帮我我的困惑是渐变就像垂直。如何设置带有不同颜色和动画的偏移的停止标记。还有动画标签。如果我使用冻结而不是repeatcount属性将采用完整的单色但我希望它填充渐变，即它如何动画。如果动画像从底部到顶部的波浪那样更好。（液体填充效果） JSfiddle

为动画后所需的最终影像添加了svg代码

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

js fiddle updated

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

Answer 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>

SVG水平渐变动画

1 个答案: