如何根据不同颜色的百分比填充SVG路径
如何根据不同颜色的百分比填充SVG路径
提问于 2019-05-24 02:20:46
我有以下SVG。我想根据百分比填写不同的颜色。例如，如果它是80% (基于我的其他函数计算)，我必须用蓝色填充这个svg直到80%，剩下的20%将是灰色的。我如何才能做到这一点，我尝试了线性梯度。但是我一点也不知道该怎么做。
以下URL中的示例
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> 回答 1
Stack Overflow用户
发布于 2019-05-24 03:30:29
这是一个简单的技术，这对我们有帮助吗？希望如此。
$('#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56280941
复制相关文章
相似问题
腾讯云开发者
