做包装设计的网站有哪些,注册资金多少有什么利弊,网站建设行业网站,网站开发页面静态化技术有人问下面这种图好怎么画#xff1f;svg 想了下#xff0c;确实用svg可以#xff0c;可以这么设计
外层是一个容器放置内容#xff0c;并且设置overflow:hidden#xff0c; 内层放一个半径大于容器宽高一半的svg#xff0c;并定位居中#xff0c;然后svg画扇形#x…有人问下面这种图好怎么画svg 想了下确实用svg可以可以这么设计
外层是一个容器放置内容并且设置overflow:hidden 内层放一个半径大于容器宽高一半的svg并定位居中然后svg画扇形动态调整path来画不同程度的扇形即可。 那首先要学习一下svg怎么画一个扇形了如下画了一个四分之一的圆即扇形
svg width200 height200 viewBox0 0 200 200path dM 100,100 L100,0 A100,100 0 0 1 200,100Z fillrgba(163,163,163,0.5) //svg
svg基础知识就不说了扇形的path用到了弧线arc格式如下
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
结合上面代码显示Move到(100,100)即圆心位置然后画直线到(100,0)开始画弧线 A跟着的是椭圆的两个半径扇形两个取值一样(100,100)
最后的x,y 指的是另一个顶点坐标根据几何图形来算坐标应该是
x rx r*sinθ
y ry - r*cosθ
所以其实基本上只要有rx、ry以及扇形弧度角θ就能画出对于的扇形。至于x-axis-rotation、large-arc-flag、sweep-flag只要考虑large-arc-flag取0还是1即可。
当θ角度大于180°时取 1 即可。
再细化一下这里用来表示0-100的进度0-100怎么转换成弧度θ呢或者如何计算呢
θ 进度值/100 × 2π
0-100相当于0°-360°根据数学知识我们知道360°的弧度就是2π因此上述公式就可以算出θ值再用Math.cos和Math.sin就能算出三角函数值。 效果
https://codepen.io/shellphon-the-encoder/pen/VwNoXEp
