javascript - 淡化路径标签中的颜色

Question

在带有 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)。

Answer 1

试试这个

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