有时候我们需要制作扇形,比如图形化数据生成饼图的时候。使用 HTML + CSS 做不到,必须借助 SVG 帮助。经过一些摸索,大概方式如下:
0. 创建 SVG
我们需要一个 SVG,然后在里面画一个园:
<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600" viewBox="0 0 20 20">
<circle r="5" cx="10" cy="10" />
</svg>
这里,我创建了一个 SVG,并且以 10,10
位圆心,画了一个半径为 5 的圆。SVG 的视窗只需要显示这个圆,所以是 0 0 20 20
的正方形。width
和 height
用来定义网页中 SVG 的尺寸,SVG 是矢量图形,可以实现内容的无损缩放,所以即使显示尺寸比图形尺寸大很多,也不用担心出现锯齿。
1. 用边框画圆形
接下来,我们用给圆加边框的方式来做圆形。
<circle
r="5"
cx="10"
cy="10"
fill="transparent"
stroke="tomato"
stroke-linecap="butt"
stroke-width="10"
></circle>
首先,我们用 fill="transparent"
清理掉圆形内部的颜色,然后用 stroke="tomato"
给边框加上橙色。接下来,我们通过 stroke-width="10"
设置边框宽度为 10,这也是矩形半径。
此时,屏幕上会出现一个橙色的正圆。
2. 画扇形
画扇形的方式有很多,比如画两条半径然后画弧形再填充颜色。但是利用边框画扇形最简单。
用边框画扇形说白了,其实是结合圆环和虚线,需要有扇形的地方,就填充颜色;不需要扇形的地方,就用虚线的空白。这里要用到 stroke-dasharray
属性,它的规则很简单,奇数为实偶数为虚,所以我们只要计算扇形所需的弧形长度,然后剩下的填充周长即可。
在我们这里,就是 stroke-dasharra
y=”calc(10 * 3.1415926 * 1/6) 31.415926"
,即取绘制一个 1/6 大小的扇形。
3. 修改位置
修改位置需要使用 stroke-dashoffset
属性,它会把图形从原来的位置移动若干距离,正的就往起点移动,负的就往终点移动。
在我们这里,就是 stroke-dashoffset="calc(-10 * 3.1415926 * 1/6)"
,将第二个扇形移到第一个扇形的旁边。
4. 其它+已知问题+扩展阅读
最终效果:https://codepen.io/meathill/pen/yLMQqBQ?editors=1000
这些属性,也可以使用 CSS 样式替换,效果一样。
Safari 问题比较多,首先半圆就不是半圆,其次偏移也不对,不知道是否只支持 CSS。
发表回复