javascript - 路径标记中的淡入颜色

在带有SVG的HTML中，您可以创建具有褪色颜色的矩形：

<svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

现在在我的代码中，我有一条类似的路径：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
   <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">

     <!-- c&#45;&gt;e -->
      <g id="a1124" class="edge">
         <title>c-&gt;e</title>
         <path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
         <polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
      </g>
   </g>
</svg>

我正在寻找一种淡化沿着path的路径颜色的方法，以使其说明某种数据流。有没有办法做到这一点？ （通过CSS或Javascript）。

最佳答案

尝试这个

@keyframes fade {
    0% {
        stroke: red;
        fill: red;
    }
    50% {
        stroke: blue;
        fill: blue;
    }
      100% {
        stroke: red;
        fill: red;
    }
}

#fade {
    animation-name: fade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
   <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">

     <!-- c&#45;&gt;e -->
      <g id="a1124" class="edge">
         <title>c-&gt;e</title>
         <path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
         <polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
      </g>
   </g>
</svg>

关于javascript - 路径标记中的淡入颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48120350/