jquery svg移动颜色动画

时间：2015-12-14 21:25:47

标签： javascript jquery css animation svg

我正在尝试制作一个svg动画，其中svg的颜色会滑动到另一种颜色。我的目标是成为一种运行灯。 我不是试图淡化整个svg的填充颜色，如很多例子所示。
这是一张带有几帧动画的示例照片。 svg animation
我尝试了一些不同的技术但找不到好的技术 这就是我用css关键帧做到的方式：

    $.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',

      });

oranje部分在绿色上移动。绘制svg，使每个矩形比另一个矩形仅6px。 由于两个关键帧之间的平滑过渡，这不起作用。这使得动画闪烁。也许如果动画是有步骤的，它会起作用，但我不知道它是如何工作的，我必须有一个更好的方法。

所以我想知道我怎么能将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>

1 个答案:

答案 0 :(得分：2)

这是一种方法：使用动画线性渐变。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新：如何手动触发和反转方向

我在这里使用了另一种创建图表的方式。此变体使用剪切路径并在剪辑后面来回滑动橙色矩形。根据OP的要求，我添加了通过鼠标悬停在几个按钮上来触发动画和切换方向的功能。

此示例使用vanilla Javascript和基本动画的超时功能。如果您愿意，可以切换到使用window.requestAnimationFrame()方法，如果页面上有很多内容并且动画无法顺利运行。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
div {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  border: solid 1px black;
  margin: 20px 20px 0 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题