animation - 如何用百分比填充自定义 SVG 形状？

Question

下面的代码包含一个可以用百分比填充的矩形，并根据 Stack Overflow 中的示例代码将矩形相加：

使用百分比值填充自定义 SVG 图像

然而，我们需要用百分比来填充桶。

桶的形状是使用 SVG 绘制的。

这里的一般想法是，无论添加多少百分比，都会填充该数量，在这种情况下，是桶中水的百分比：

代码已针对 fill="url(#lg)" 进行了修改，以包含在桶形状中，以便具有与矩形相同的功能，但这不起作用。

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">

<path d="M220,40 L250,250 L390,250 420,40
  A50,10 0 0,1 220,40
  Q320,10 420,41" 

stroke="black" fill="transparent"/>
  
</svg>

标签： animationsvg

Answer 1

仅当形状轮廓闭合时才可以使用渐变填充

也就是说，形状的轮廓必须使用path,来绘制 polyline，polygon但不能使用多个 lines

我在矢量编辑器中重新绘制了一个桶，其中将填充渐变（水）的内部体积class="bucket_body"具有连续的轮廓

我还删除了嵌套的 svg 标签，因为我认为它们是多余的

渐变填充动画取自您提供的链接

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 10000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

.s0{
    fill:none;
    stroke-width:2.5;
    stroke:#000;
}
.s1{
    fill:none;
    opacity:0.5;
    stroke-linecap:round;
    stroke-width:5;
    stroke:#2F2D1F;
}
.s2{
    fill:none;
    stroke-linecap:round;
    stroke-width:5;
    stroke:#2F2D1F;
} 
.arc{
    fill:none;
    stroke-linecap:round;
    stroke-width:6;
    stroke:#2F2D1F;
}
.s4{
    fill:silver;
    stroke-width:5;
    stroke:black;
}
.bucket_top{
    fill:none;
    stroke-width:10;
    stroke:black;
}  
.bucket_bottom{
    fill:none;
    stroke-width:6;
    stroke:black;
} 
.bucket_body{
    stroke-width:6;
    stroke:black;
    fill:url(#lg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="370" height="230" viewBox="0 0 940 500" version="1.1">
  
<defs>
    <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue">
            <animate attributeName="offset" values="0;1" repeatCount="1" dur="10s" begin="0s" fill="freeze"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1" repeatCount="1" dur="10s"  begin="0s" fill="freeze"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
</defs>
  <path class="bucket_body" d="m336.1 181.3 52-13.6 64.4-5.6 48.9 1.2 44.6 7.4 27.2 10.5 18.6 11.8c0 0-21.3 121.7-22.9 183.2-0.1 2.9 0.1 5.8 0.6 8.7 0.4 1.9 2.4 3.6 1.7 5.4-3.3 8.6-15.1 10.7-23.7 13.9-14.8 5.4-31 6.3-46.7 8-16.4 1.7-33 2.9-49.5 1.9-19.4-1.2-38.8-4.2-57.6-9.3-10.5-2.8-21-6.2-30.3-11.8-1.6-1-4-1.8-4.3-3.7-4.5-28.9-8.7-88.5-8.7-88.5l-8.4-63.7zM357.2 386.8" />
  <path class="bucket_bottom" d="m357.2 386.8c0 0-2 5.3-1.3 7.9 1.4 5.4 5.8 10 10.5 13.1 10.6 7.1 24.3 8 36.8 10.5 18.4 3.7 37.2 5.8 56 6.6 16.6 0.7 33.4 0.3 49.9-1.8 11.7-1.5 23.4-3.8 34.6-7.4 6.4-2.1 12.5-5 18.4-8.3 3.8-2.2 8.4-3.8 10.9-7.4 1.8-2.6 2.2-9.2 2.2-9.2" />
  <path class="bucket_top" d="m334.4 178c0.3-8.5 12.9-11.6 20.6-15.3 12.5-6 26.7-7.8 40.3-10.5 9.8-1.9 19.8-3.2 29.8-3.9 12.8-0.9 25.7-0.7 38.5-0.4 15.9 0.3 31.8 1.1 47.7 2.2 12.3 0.9 24.7 1.2 36.8 3.5 9.8 1.9 19.6 4.5 28.9 8.3 7.4 3 18.1 4 21 11.4 1.7 4.3-1.2 9.8-4.4 13.1-6.5 6.7-17.2 7.3-26.3 9.6-9.9 2.6-20.1 3.3-30.2 4.8-10.1 1.5-20.1 3.3-30.2 4.4-13.7 1.4-27.4 2.6-41.1 2.6-11.8 0-23.7-1.1-35.5-2.2-11.1-1-22.2-2.2-33.3-3.9-8.4-1.3-16.7-2.9-24.9-4.8-8-1.9-16.4-2.7-23.6-6.6-5.5-2.9-14.3-6.1-14-12.3z" />
  <path class="s4" d="m470.3 214.1c1.8-3.6 6.7-3.3 8.9-8.1 1-2 2.1-4.1 2.4-6.3 2.1-9.6-4.7-16.5 5-21.2 3.1-1 7-1.2 9.8 0.4 2.8 1.7 4.5 5.1 5 8.3 0.7 3.9-2.6 7.8-2.2 11.8 0.7 14.6 12.8 8.5 11.8 18.4-0.1 1.2-1 2.4-2 3.1-3.8 2.5-8.9 1.9-13.3 2.4-4.8 0.6-9.6 0.8-14.4 0.9-3.3 0.1-6.8 0.9-9.8-0.2-0.8-0.3-1.6-0.8-1.9-1.5-1-2.4-0.5-5.5 0.7-7.9z" />
  <path class="s4" d="m435.5 145.7c0 0 0-6.9 0.9-10.2 0.6-2.3 1.4-4.8 3.1-6.5 1.9-1.8 4.5-3.2 7.1-3.1 2.1 0.1 4 1.5 5.6 2.8 1.5 1.2 2.6 3 3.7 4.6 1.2 1.9 2.2 3.8 3.1 5.9 0.8 1.8 1.6 3.6 1.9 5.6 0.1 1 0.7 3.1-0.3 3.1-7.9-0.4-24.8-0.3-24.8-0.3" />
  <path class="arc" d="m446.3 140.7c0 0 13.8-10.2 21-14.9 6.9-4.4 14.2-8.2 21.4-12.4 5.5-3.2 10.8-6.7 16.4-9.6 6.4-3.3 13.2-5.9 19.8-9 5.8-2.7 11.3-6.3 17.3-8.4 6-2.1 12.2-3.8 18.6-4 3.5-0.1 7.3 0 10.5 1.5 3.6 1.7 8 4.1 9 8 1.5 6-3.6 11.9-6.5 17.3-3.1 5.6-7.3 10.6-11.5 15.5-4.8 5.8-10.1 11.1-15.5 16.4-5.5 5.4-11.3 10.6-17 15.8-4.4 4-8.8 8.1-13.3 12.1-4 3.5-8 7.1-12.1 10.5-4.6 3.8-13.9 11.1-13.9 11.1" />
  <ellipse cx="490.5" cy="190.7" rx="3.8" ry="3.7" class="s1"/>
  <ellipse cx="447.1" cy="138.4" rx="3.8" ry="3.7" class="s1"/>
 <text id="count" x="404" y="290" font-size="64" fill=black">100%</text>
</svg>  
</svg>