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

我无法在svg图像中创建横向对象。我需要随着进度的增加(0〜100%或0〜1)来填充图形,但也需要填充图形路径的负数。 让我用一些图像来说明我需要的东西。

这是我可以实现的: Already Done

这就是我所需要的:

Hope to achieve

有没有简单的方法可以实现这一目标? 编辑:对不起,这是我的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.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,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>

和CSS类:

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

谢谢!

yongyuanxingfupingan 回答:SVG填充图及其不同颜色的底片

基于路径的样子,简单的方法就是复制绘制轮廓的形状的一部分,将其放置在现有形状的下面,然后使用不同的渐变对其进行动画处理。

(一种更好的方法是使用胖描边而不是填充来绘制形状,并使用gradientUnits = userSpaceOnUse在描边和填充上放置不同的渐变。)

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

.anzac {
    fill: url(#gradient2);
    position: absolute;
    height: auto; 
}
<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="gradient1" 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.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,1" />
            </stop>
            <stop stop-color="green" offset="1" />
        </linearGradient>
  
    <linearGradient id="gradient2" 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,1" />
            </stop>
            <stop stop-color="blue" offset="1">
                <animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4,1" />
            </stop>
            <stop stop-color="blue" offset="1" />
        </linearGradient>
  
  
    </defs>
  
    <path class="anzac" 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.531z"/>
  
  
<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>

本文链接:https://www.f2er.com/3050708.html

大家都在问