动态填充 svg

Question

我想动态填充 SVG（没有标准形状）例如，我有一颗从下面某处复制的心。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" data-ember-extension="1" width="100px" height="100px">
  <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="red" stroke="#000"/>
</svg>

现在我想得到这样的效果：

总会有 3 种颜色需要填充，但比例如下：

0% 绿色 40% 橙色 60% 蓝色

或

15% 绿色 0% 橙色 85% 蓝色

或

0% 绿色 0% 橙色 100% 蓝色

总是必须从左到右填充相同颜色的顺序：绿色，橙色，蓝色。

有什么建议可以实现吗？心形是一个例子，其他形状我也必须有它，例如泪珠。

Answer 1

使用颜色突然变化的线性渐变。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" data-ember-extension="1" width="100px" height="100px">
  <defs>
    <linearGradient id="grad">
      <stop offset="0%" stop-color="limegreen"/>
      <stop offset="25%" stop-color="limegreen"/>
      <stop offset="25%" stop-color="orange"/>
      <stop offset="50%" stop-color="orange"/>
      <stop offset="50%" stop-color="dodgerblue"/>
      <stop offset="100%" stop-color="dodgerblue"/>
    </linearGradient>
  </defs>
  <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="url(#grad)" stroke="#000"/>
</svg>

动态填充 svg

Dynamic filling svg

svg

dynamic

fill