SVG Path(三)弧线命令

简介: SVG Path(三)弧线命令
  • 弧线命令
  • A(rx, ry, xr, laf, sf, x, y) - 绘制弧线
  • 参数分析:
  • rx - (radius-x):弧线所在椭圆的 x 半轴长
  • ry - (radius-y):弧线所在椭圆的 y 半轴长
  • xr - (xAxis-rotation):弧线所在椭圆的长轴角度
  • laf - (large-arc-flag):是否选择弧长较长的那一段弧
  • sf - (sweep-flag):是否选择逆时针方向的那一段弧
  • x, y:弧的终点位置


  • 案例代码
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0, 0, 3000, 3000">
    <path d="M 400 200 A 400 200 0 0 0 300 300" stroke="red" fill="rgba(0, 0, 0, 0)"/>
    <path d="M 400 200 A 400 200 0 1 1 300 300" stroke="blue" fill="rgba(0, 0, 0, 0)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 800, 800">
    <path d="M 100 100 L 160 40 L 160 160 L 100 100 M 160 40 A 50 50 0 0 1 160 160" fill="rgba(0, 0, 0, 0)" stroke="red" />
</svg>

相关文章
SVG Path(二)移动与直线命令
SVG Path(二)移动与直线命令
102 0
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
5月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
93 1
|
6月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
75 3
|
6月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
67 3
|
前端开发
css绘制三角形
css绘制三角形
48 1
|
7月前
|
前端开发
CSS小技巧之绘制心形图案
CSS小技巧之绘制心形图案
105 0
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
301 0
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
138 1