如何根据不同颜色的百分比填充SVG路径[重复]答案

【问题标题】：How to fill SVG path based on the percentage in different color [duplicate]如何根据不同颜色的百分比填充SVG路径[重复]
【发布时间】：2019-05-24 03:36:57
【问题描述】：

我有以下 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>

【问题讨论】：

我会使用 elemenzüt 广告剪辑路径，并且只需要有两个大小合适的相邻矩形。尝试用 inkscape 绘制它。
@ZorgoZ 好的，我的方法得到了它。如果您有更好的方法，请提出建议
底部为蓝色，顶部为灰色。还是从左到右？还是别的什么？

标签： html css svg

【解决方案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>

【讨论】：