SVG填充路径动画

Question

我有一个箭头头的路径，我想做一个颜色转换动画，从左到右。

我已经为行和箭头这样做了，但它似乎不同步。我想要线和箭头两个过渡颜色无缝。

这是小提琴：https://jsfiddle.net/afonsolfm/6ojwrksd/。

<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

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

​

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>

​

Answer 2

这似乎更好，你可以进一步实验的数字，我猜。基本上，我已经把动画绑在一起，并在它开始的时候加快了标记的速度。

​

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

path {
  fill: none;
}

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

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

<svg>
  <defs>
      <linearGradient id="left-to-right">
        <stop offset="0" stop-color="green">
          <animate id="a" 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="a.end-0.2s" dur="0.2s" attributeName="offset" fill="freeze" from="0" to="1" />
        </stop>
        <stop offset="0" stop-color="blue">
          <animate begin="a.end-0.2s" dur="0.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>

​