Question

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

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

这是小提琴：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

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

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>

SVG填充路径动画

2 个答案: