SVG 画正六边形的进度条~奇奇怪怪的需求

最新推荐文章于 2024-05-23 14:09:02 发布

乔豆麻袋_

最新推荐文章于 2024-05-23 14:09:02 发布

阅读量624

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36630786/article/details/117772767

版权

拿了点赞哦~~如下图所示，中间可以放图片，黄色占比啦先看菜鸟教程里面，固定的数值话是这样滴<!DOCTYPE html><html><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="30,10 50,20 50,40 30,50 10,40 10,20 30,10" style= "fill: transparent

摘要由CSDN通过智能技术生成

如下图所示，中间可以放图片，黄色占比啦
先看菜鸟教程里面，固定的数值话是这样滴

<!DOCTYPE html>
<html>
<body>


	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
		<polyline points="30,10 50,20 50,40 30,50 10,40 10,20 30,10" style= "fill: transparent; stroke: rgba(72, 199, 255, 0.2); stroke-width: 2;" />
		<polyline cx="60" cy="60" points="30,10 50,20 50,40 30,50 18,44" style= "fill: transparent; stroke: #ffc702; stroke-width: 2;" />
	</svg>
</body>
</html>

写成组件的话，就是给一个数画出占比，我的思路：一共六段，一份是1/6，求出给出的数占1/6的整数部分，和余数部分。比如给3/4 是1/6的9/2 也就是4

最低0.47元/天解锁文章

乔豆麻袋_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
SVG 画正六边形的进度条~奇奇怪怪的需求

拿了点赞哦~~如下图所示，中间可以放图片，黄色占比啦先看菜鸟教程里面，固定的数值话是这样滴<!DOCTYPE html><html><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="30,10 50,20 50,40 30,50 10,40 10,20 30,10" style= "fill: transparent
复制链接

扫一扫

专栏目录