Question

我有以下SVG。我想根据百分比填写不同的颜色。例如，如果它是80％（根据我的其他函数计算），则我必须将此svg用蓝色填充到80％，其余20％将是灰色。我怎样才能做到这一点，我尝试了线性渐变。但是我不知道该怎么做。

在下面的网址中采样

https://jsbin.com/yafoxanoxi/edit?html,output

任何输入？

<svg version="1.1"  id="Layer_1"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365 300"
        >

          <path
            d="M52.3,292.4c-13.9-19.2-28.7-40.5-34-64c-5.7-25.4-8.4-52.1-3.9-77.9C18.3,128,29,102.8,42.2,84.3
C58.3,61.9,78.3,45.9,101.9,32c42.7-24.9,101.1-26.7,146.2-7c47.1,20.6,81.3,61.9,96.3,110.5c14,45.3,4.2,101-21.5,140.2
c-3.8,5.8-8.4,11.1-12.5,16.6c7.4,2.8,9.5,6,14-0.7c4.9-7.3,10.3-14.4,14.7-22c6.3-10.9,10.5-23.4,14.1-35.4
c7.9-26.4,9.4-53.4,5.4-80.7c-7.8-53.4-40.8-102.9-88.5-128.9c-25.5-13.9-52.6-22.2-81.7-22.2c-13.6,0-26.3,0.1-39.7,2.2
c-15,2.3-28.8,7.6-42.9,13.4C56.8,38.3,19.8,86.5,6.8,137c-6.5,25.1-8.1,52.8-3.3,78.4c5.1,27.3,18.3,52.7,33.8,75.4
c1.3,1.9,3.1,5.5,4.9,5.9C44.3,297.1,50.3,293.3,52.3,292.4z"
           fill="#ccc"/>
        </svg>

Answer 1

这显示了一种简单的技术，这有帮助吗？希望如此。

$('#manipulate_me').height('.5');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <svg 
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 365 300"
            >
   <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <rect id="manipulate_me" width="1" height=".3"/>
  </clipPath>
   <circle fill="red" cx="181" cy="181" r="170" />
              <path
                d="M52.3,292.4c-13.9-19.2-28.7-40.5-34-64c-5.7-25.4-8.4-52.1-3.9-77.9C18.3,128,29,102.8,42.2,84.3
	C58.3,61.9,78.3,45.9,101.9,32c42.7-24.9,101.1-26.7,146.2-7c47.1,20.6,81.3,61.9,96.3,110.5c14,45.3,4.2,101-21.5,140.2
	c-3.8,5.8-8.4,11.1-12.5,16.6c7.4,2.8,9.5,6,14-0.7c4.9-7.3,10.3-14.4,14.7-22c6.3-10.9,10.5-23.4,14.1-35.4
	c7.9-26.4,9.4-53.4,5.4-80.7c-7.8-53.4-40.8-102.9-88.5-128.9c-25.5-13.9-52.6-22.2-81.7-22.2c-13.6,0-26.3,0.1-39.7,2.2
	c-15,2.3-28.8,7.6-42.9,13.4C56.8,38.3,19.8,86.5,6.8,137c-6.5,25.1-8.1,52.8-3.3,78.4c5.1,27.3,18.3,52.7,33.8,75.4
	c1.3,1.9,3.1,5.5,4.9,5.9C44.3,297.1,50.3,293.3,52.3,292.4z"
               fill="#000"/>
   <circle clip-path="url(#myClip)" fill="white" cx="181" cy="181" r="170" />
   
             
   

              
             
            </svg>

</body>
</html>

如何根据不同颜色的百分比填充SVG路径

1 个答案: