jquery svg shift彩色動畫

我想製作一個svg動畫，其中svg的顏色滑動到其他顏色。我的目標是製作一種跑步燈。我並沒有試圖淡化整個svg的填充色，正如很多示例中所看到的那樣。
這是一個帶有幾幀動畫的示例照片。 svg animation
我試過幾種不同的技術，但找不到一個好的。
這是我用CSS關鍵幀做的：jquery svg shift彩色動畫

$.keyframe.define([{ 
     name: 'shift', 
     '0%': {'background-position':'0px'}, 
     '2%': {'background-position':'6px'}, 
     '4%': {'background-position':'12px'}, 
     '6%': {'background-position':'18px'}, 
     '8%': {'background-position':'24px'}, 
     '10%': {'background-position':'30px'}, 
     '12%': {'background-position':'36px'}, 
     '14%': {'background-position':'42px'}, 
     '16%': {'background-position':'48px'}, 
     '18%': {'background-position':'54px'}, 
     '20%': {'background-position':'60px'}, 
     '22%': {'background-position':'66px'}, 
     '24%': {'background-position':'72px'}, 
     '26%': {'background-position':'78px'}, 
     '28%': {'background-position':'84px'}, 
     '30%': {'background-position':'90px'}, 
     '32%': {'background-position':'96px'}, 
     '34%': {'background-position':'102px'}, 
     '36%': {'background-position':'108px'}, 
     '38%': {'background-position':'114px'}, 
     '40%': {'background-position':'120px'}, 
     '42%': {'background-position':'126px'}, 
     '44%': {'background-position':'132px'}, 
     '46%': {'background-position':'138px'}, 
     '48%': {'background-position':'144px'}, 
     '50%': {'background-position':'150px'}, 
     '52%': {'background-position':'156px'}, 
     '54%': {'background-position':'162px'}, 
     '56%': {'background-position':'168px'}, 
     '58%': {'background-position':'174px'}, 
     '60%': {'background-position':'180px'}, 
     '62%': {'background-position':'186px'}, 
     '64%': {'background-position':'192px'}, 
     '66%': {'background-position':'198px'}, 
     '68%': {'background-position':'204px'}, 
     '70%': {'background-position':'210px'}, 
     '72%': {'background-position':'216px'}, 
     '74%': {'background-position':'222px'}, 
     '76%': {'background-position':'228px'}, 
     '78%': {'background-position':'234px'}, 
     '80%': {'background-position':'240px'}, 
     '82%': {'background-position':'246px'}, 
     '84%': {'background-position':'252px'}, 
     '86%': {'background-position':'258px'}, 
     '88%': {'background-position':'264px'}, 
     '90%': {'background-position':'270px'}, 
     '92%': {'background-position':'276px'}, 
     '94%': {'background-position':'282px'}, 
     '96%': {'background-position':'288px'}, 
     '98%': {'background-position':'294px'}, 
     '100%': {'background-position':'300px'} 

    }]); 
    $('.ledbar').playKeyframe({ 
     name: 'shift', 
     duration: "4s", 
     timingFunction: 'linear', 
     delay: 0, 
     direction: 'reverse', 
     fillMode: 'forwards', 

     });

在綠橙衣軍團的部分移動。 svg被繪製成每個矩形比另一個長6px。由於兩個關鍵幀之間的平滑過渡，因此無法工作。這使動畫閃爍。也許如果動畫是在步驟中，它會工作，但我不知道這是如何工作，我必須有一個更好的方法。

所以我想知道我怎麼能liniear轉換到其他顏色的SVG顏色。我已經看過svg面具等，但無法找到答案。

這是SVG文件，也許它有用：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!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="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve"> 
<g id="Button_2_-_Green"> 
</g> 
<g> 
    <path fill="#80A993" d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/> 
    <path fill="#80A993" d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/> 
    <path fill="#80A993" d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/> 
    <path fill="#80A993" d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/> 
    <path fill="#80A993" d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/> 
    <path fill="#80A993" d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/> 
    <path fill="#80A993" d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/> 
    <path fill="#80A993" d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/> 
    <path fill="#80A993" d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/> 
    <path fill="#80A993" d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/> 
    <path fill="#80A993" d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/> 
    <path fill="#80A993" d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/> 
    <path fill="#80A993" d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/> 
    <path fill="#80A993" d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/> 
    <path fill="#80A993" d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/> 
    <path fill="#80A993" d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/> 
    <path fill="#80A993" d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/> 
    <path fill="#80A993" d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/> 
    <path fill="#80A993" d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/> 
    <path fill="#80A993" d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/> 
    <path fill="#80A993" d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/> 
    <path fill="#80A993" d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/> 
    <path fill="#80A993" d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/> 
    <path fill="#80A993" d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/> 
    <path fill="#80A993" d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/> 
    <path fill="#80A993" d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/> 
    <path fill="#80A993" d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/> 
    <path fill="#80A993" d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/> 
    <path fill="#80A993" d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/> 
    <path fill="#80A993" d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/> 
    <path fill="#80A993" d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/> 
    <path fill="#80A993" d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/> 
    <path fill="#80A993" d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/> 
    <path fill="#80A993" d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/> 
    <path fill="#80A993" d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/> 
    <path fill="#80A993" d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/> 
    <path fill="#80A993" d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/> 
    <path fill="#80A993" d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/> 
    <path fill="#80A993" d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/> 
    <path fill="#80A993" d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/> 
    <path fill="#80A993" d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/> 
    <path fill="#80A993" d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/> 
    <path fill="#80A993" d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/> 
    <path fill="#80A993" d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/> 
    <path fill="#80A993" d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/> 
    <path fill="#80A993" d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/> 
    <path fill="#80A993" d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/> 
    <path fill="#80A993" d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/> 
    <path fill="#80A993" d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/> 
    <path fill="#80A993" d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/> 
    <path fill="#80A993" d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/> 
    <path fill="#80A993" d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/> 
    <path fill="#80A993" d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/> 
    <path fill="#80A993" d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/> 
    <path fill="#80A993" d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/> 
    <path fill="#80A993" d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/> 
    <path fill="#80A993" d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/> 
    <path fill="#80A993" d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/> 
    <path fill="#80A993" d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/> 
    <path fill="#80A993" d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/> 
    <path fill="#80A993" d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/> 
    <path fill="#80A993" d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/> 
    <path fill="#80A993" d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/> 
    <path fill="#80A993" d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/> 
    <path fill="#80A993" d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/> 
    <path fill="#80A993" d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/> 
    <path fill="#80A993" d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/> 
    <path fill="#80A993" d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/> 
</g> 
</svg>

來源

2015-12-14 kobey

下面是做到這一點的一種方法：運用動畫線性漸變。

<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="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve"> 
 
<defs> 
 
    <linearGradient id="orange-grad" gradientUnits="userSpaceOnUse"> 
 
    <stop offset="0" stop-color="orange"/> 
 
    <stop offset="0" stop-color="orange"> 
 
     <animate attributeName="offset" attributeType="XML" 
 
       begin="0s" dur="5s" fill="freeze" from="0" to="1" /> 
 
    </stop> 
 
    <stop offset="0" stop-color="#80A993"> 
 
     <animate attributeName="offset" attributeType="XML" 
 
       begin="0s" dur="5s" fill="freeze" from="0" to="1" /> 
 
    </stop> 
 
    <stop offset="1" stop-color="#80A993"/> 
 
    </linearGradient> 
 
</defs> 
 
<g fill="url(#orange-grad)"> 
 
    <path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/> 
 
    <path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/> 
 
    <path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/> 
 
    <path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/> 
 
    <path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/> 
 
    <path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/> 
 
    <path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/> 
 
    <path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/> 
 
    <path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/> 
 
    <path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/> 
 
    <path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/> 
 
    <path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/> 
 
    <path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/> 
 
    <path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/> 
 
    <path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/> 
 
    <path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/> 
 
    <path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/> 
 
    <path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/> 
 
    <path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/> 
 
    <path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/> 
 
    <path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/> 
 
    <path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/> 
 
    <path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/> 
 
    <path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/> 
 
    <path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/> 
 
    <path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/> 
 
    <path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/> 
 
    <path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/> 
 
    <path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/> 
 
    <path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/> 
 
    <path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/> 
 
    <path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/> 
 
    <path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/> 
 
    <path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/> 
 
    <path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/> 
 
    <path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/> 
 
    <path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/> 
 
    <path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/> 
 
    <path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/> 
 
    <path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/> 
 
    <path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/> 
 
    <path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/> 
 
    <path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/> 
 
    <path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/> 
 
    <path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/> 
 
    <path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/> 
 
    <path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/> 
 
    <path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/> 
 
    <path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/> 
 
    <path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/> 
 
    <path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/> 
 
    <path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/> 
 
    <path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/> 
 
    <path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/> 
 
    <path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/> 
 
    <path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/> 
 
    <path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/> 
 
    <path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/> 
 
    <path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/> 
 
    <path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/> 
 
    <path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/> 
 
    <path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/> 
 
    <path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/> 
 
    <path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/> 
 
    <path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/> 
 
    <path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/> 
 
    <path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/> 
 
    <path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/> 
 
</g> 
 
</svg>

更新：如何手動觸發和反向

在這裏，我使用了一個創建圖表的方式不同。此變體使用剪切路徑並在剪輯後面來回滑動橙色矩形。按照OP的要求，我添加了通過鼠標移動幾個按鈕來觸發動畫和切換方向的功能。

本示例使用vanilla Javascript和基本動畫的超時函數。如果你願意，如果頁面上有很多事情發生，並且動畫運行不順暢，你可以切換到使用window.requestAnimationFrame()方法。

var graphPosition = 0; 
 
var graphStep = 6; 
 
var graphRunning = false; 
 

 
var orangeRect = document.getElementById("orange"); 
 

 

 
document.getElementById("forwards").addEventListener("mouseenter", function() { 
 
    graphStep = 6; 
 
    startGraphRunning(); 
 
}); 
 

 
document.getElementById("backwards").addEventListener("mouseenter", function() { 
 
    graphStep = -6; 
 
    startGraphRunning(); 
 
}); 
 

 

 

 
function startGraphRunning() 
 
{ 
 
    // If already running, do nothing 
 
    if (graphRunning) return; 
 

 
    graphRunning = true; 
 

 
    // Perform the first step in the animation 
 
    animationStep(); 
 
} 
 

 

 
function animationStep() 
 
{ 
 
    // Calculate new position of orang rectangle 
 
    var newPos = graphPosition += graphStep; 
 
    if (newPos < 0 || newPos > 408) 
 
    { 
 
    // Stop animation if we have reach min or max position 
 
    graphRunning = false; 
 
    } 
 
    else 
 
    { 
 
    // Update x position of orange rect 
 
    graphPosition = newPos; 
 
    // We want right hand edge of rectangle to be at "graphPosition", 
 
    // so we position rect at (graphPosition - rectangle-width) 
 
    orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value); 
 
    } 
 

 
    // If animation is still running, call this function again in 50mS 
 
    if (graphRunning) 
 
    setTimeout(animationStep, 50); 
 
}

div { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background-color: #eee; 
 
    border: solid 1px black; 
 
    margin: 20px 20px 0 0; 
 
}

<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="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve"> 
 
<defs> 
 
    <clipPath id="graph"> 
 
    <path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/> 
 
    <path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/> 
 
    <path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/> 
 
    <path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/> 
 
    <path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/> 
 
    <path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/> 
 
    <path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/> 
 
    <path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/> 
 
    <path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/> 
 
    <path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/> 
 
    <path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/> 
 
    <path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/> 
 
    <path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/> 
 
    <path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/> 
 
    <path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/> 
 
    <path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/> 
 
    <path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/> 
 
    <path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/> 
 
    <path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/> 
 
    <path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/> 
 
    <path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/> 
 
    <path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/> 
 
    <path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/> 
 
    <path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/> 
 
    <path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/> 
 
    <path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/> 
 
    <path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/> 
 
    <path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/> 
 
    <path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/> 
 
    <path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/> 
 
    <path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/> 
 
    <path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/> 
 
    <path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/> 
 
    <path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/> 
 
    <path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/> 
 
    <path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/> 
 
    <path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/> 
 
    <path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/> 
 
    <path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/> 
 
    <path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/> 
 
    <path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/> 
 
    <path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/> 
 
    <path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/> 
 
    <path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/> 
 
    <path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/> 
 
    <path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/> 
 
    <path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/> 
 
    <path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/> 
 
    <path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/> 
 
    <path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/> 
 
    <path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/> 
 
    <path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/> 
 
    <path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/> 
 
    <path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/> 
 
    <path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/> 
 
    <path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/> 
 
    <path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/> 
 
    <path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/> 
 
    <path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/> 
 
    <path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/> 
 
    <path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/> 
 
    <path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/> 
 
    <path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/> 
 
    <path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/> 
 
    <path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/> 
 
    <path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/> 
 
    <path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/> 
 
    <path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/> 
 
    </mask> 
 
</defs> 
 

 
<g clip-path="url(#graph)"> 
 
    <rect x="0" y="0" width="408" height="13" fill="green"/> 
 
    <rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/> 
 
</g> 
 

 
</svg> 
 

 
<br /> 
 
<div id="forwards">Forwards</div> 
 
<div id="backwards">Backwards</div>

來源

2015-12-15 08:26:05

完美啊！你可以用jQuery來觸發它嗎？如果可能的話選擇顛倒jquery的方向？ – kobey

答案是肯定的。然而，解決方案將取決於您希望如何工作。如果你想停下來，開始和扭轉圖形，那麼我可能會以另一種方式做到這一點，而不是我在這裏做的。 –

我有2個div。當我將鼠標懸停在第一個上面時，它需要從下往上從綠色變爲橙色，當我將鼠標懸停在第二個上面時，它需要從上到下從橙色變爲綠色。 – kobey

jquery svg shift彩色動畫

回答

相關問題