css - SVG 填充路径动画

Question

我有一个带箭头的路径，我想制作一个从左到右的颜色过渡动画。

我已经为线条和箭头完成了此操作，但它们似乎并不同步。我希望线条和箭头无缝过渡到两种颜色。

这是 fiddle :https://jsfiddle.net/afonsolfm/6ojwrksd/ .

HTML

<svg>
  <defs>
      <linearGradient id="left-to-right">
        <stop offset="0" stop-color="green">
          <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
        </stop>
        <stop offset="0" stop-color="blue">
          <animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
        </stop>
      </linearGradient>

      <linearGradient id="left-to-right-arrow">
        <stop offset="0" stop-color="green">
          <animate begin="2s" dur="1s" attributeName="offset" fill="freeze" from="0" to="1" />
        </stop>
        <stop offset="0" stop-color="blue">
          <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
        </stop>
      </linearGradient>

    <marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
      <path d="M -5 5, 0 0.3, -5 -5"></path>
    </marker>
  </defs>
  <path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
</svg>

CSS

svg {
  width: 600px;
  height: 300px;
  border: 1px solid green;
}

path {
  fill: transparent;
}

.line {
  marker-end: url(#arrow-head);
  stroke: url(#left-to-right);
  stroke-width: 10px;
}

#arrow-head {
  stroke: url(#left-to-right-arrow);
}

Answer 1

另一种方法是将渐变动画放在矩形上，然后使用箭头作为 mask 。

svg {
  width: 600px;
  height: 300px;
  border: 1px solid green;
}

path {
  fill: transparent;
}

.line {
  marker-end: url(#arrow-head);
  stroke: white;
  stroke-width: 10px;
}

#arrow-head {
  stroke: white;
}

#masked-rect {
  fill: url(#left-to-right);
  mask: url(#arrow-mask);
}

<svg>
  <defs>
    <linearGradient id="left-to-right">
      <stop offset="0" stop-color="green">
        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="blue">
        <animate dur="0s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
    </linearGradient>
    
    <marker id="arrow-head" viewBox="-5 -5 10 10" refX="0" refY="0" orient="auto" markerWidth="10" markerHeight="10">
      <path d="M -5 5, 0 0.3, -5 -5"></path>
    </marker>
    
    <mask id="arrow-mask">
      <path class="line" d="M 10 100 A 500 500 0 0 1 500 100"></path>
    </mask>
  </defs>
  
  <rect id="masked-rect" width="100%" height="100%"/>
</svg>