SVG填充图形及其负片的不同颜色

在svg图像中创建gardient时遇到问题。随着进度的增加（0~100%或0~1），我需要填充图形，但也需要填充图形路径的负数。 让我用一些图片来说明我需要什么，以便更清楚

这就是我能做到的：

这就是我需要的：

有没有一个简单的方法来实现这一点？ 编辑：对不起，这是我的SVG代码：

<svg id="Capa_1" enable-background="new 0 0 503.353 503.353" height="512" viewBox="0 0 503.353 503.353" width="512" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop stop-color="#aaa" offset="0" />
            <stop stop-color="#aaa" offset="1">
                <animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
            </stop>
            <stop stop-color="green" offset="1">
                <animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
            </stop>
            <stop stop-color="green" offset="1" />
        </linearGradient>
    </defs>
<path class="kiwi" d="m483.142 269.401-1.281-12.05-12.05-1.281c-1.145-.121-9.029-.899-21.262-.838-.005-.412-.001-.824-.009-1.236-1.83-95.103-83.035-161.783-86.491-164.575l-9.426-7.616-9.426 7.616c-.768.621-5.382 4.403-12.108 10.948-24.406-55.352-67.489-90.736-69.986-92.753l-9.426-7.616-9.426 7.616c-2.49 2.011-45.318 37.183-69.764 92.245-6.44-6.232-10.835-9.835-11.583-10.439l-9.426-7.616-9.426 7.616c-3.456 2.792-84.661 69.472-86.491 164.575-.008.414-.004.826-.009 1.24-12.662-.098-20.841.71-22.01.834l-12.05 1.281-1.281 12.05c-.47 4.418-10.74 108.988 55.213 177.53 36.076 37.492 87.354 56.422 152.663 56.422 7.668 0 15.537-.269 23.59-.791 8.057.523 15.917.791 23.59.791 65.303 0 116.589-18.932 152.663-56.422 65.952-68.543 55.682-173.113 55.212-177.531zm-130.519-148.024c19.981 19.489 64.799 70.155 65.927 133.393.013.733.002 1.465.004 2.198-23.708 2.614-52.747 8.816-80.739 22.639-10.149-29.958-26.595-55.141-41.675-73.83 14.488-39.789 42.01-70.284 56.483-84.4zm-100.946 345.907c-44.573-42.071-66.743-86.537-65.926-132.316 1.127-63.242 45.954-113.913 65.926-133.392 19.981 19.489 64.799 70.155 65.927 133.392.815 45.779-21.354 90.244-65.927 132.316zm-.001-427.713c14.614 14.254 42.507 45.186 56.882 85.514-12.001 14.807-24.912 33.756-34.854 55.966-6.991-6.838-11.814-10.794-12.601-11.43l-9.426-7.616-9.426 7.616c-.767.62-5.371 4.395-12.082 10.923-10.056-22.312-23.091-41.309-35.146-56.097 14.441-40.021 42.123-70.704 56.653-84.876zm-166.124 215.199c1.127-63.242 45.954-113.913 65.926-133.393 14.402 14.047 41.701 44.292 56.249 83.765-15.218 18.751-31.923 44.168-42.187 74.464-27.697-13.677-56.423-19.896-79.991-22.557 0-.76-.011-1.519.003-2.279zm11.625 171.501c-43.922-45.516-48.054-113.042-47.706-140.938 21.81-.277 67.78 2.211 108.551 24.244-1.303 7.968-2.101 16.179-2.264 24.619-.936 48.66 19.036 95.238 59.414 138.849-50.56-2.269-90.153-17.923-117.995-46.774zm308.999 0c-27.843 28.855-67.441 44.526-118.002 46.781 40.382-43.613 60.357-90.193 59.42-138.856-.162-8.44-.961-16.651-2.263-24.619 40.783-22.038 86.768-24.519 108.55-24.245.348 27.909-3.787 95.426-47.705 140.939z"/>
</svg>

---

谢谢

根据路径的外观，简单的方法是复制绘制轮廓的部分形状，将其置于现有形状下方，并使用不同的渐变设置动画

（更好的方法是使用胖笔划而不是填充绘制形状，并使用gradientUnits=userSpaceOnUse在笔划和填充上添加不同的渐变。）

.kiwi{
填充：url（#梯度1）；
位置：绝对位置；
高度：自动；
}
澳大利亚新西兰航空公司{
填充：url（#梯度2）；
位置：绝对位置；
高度：自动；
}

向我们展示SVG的标记：没有它，我们无法告诉您如何继续。查看如何创建。抱歉，我刚刚添加了它。

.kiwi {
    fill: url(#gradient);
    position: absolute;
    height: auto; 
}