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

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

路径标记中的淡色

1 个答案: