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(二)移动与直线命令
109 0
|
7月前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
115 1
|
8月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
89 3
|
7月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
9月前
|
算法 前端开发
如何用SVG画一个特定边框(下)
如何用SVG画一个特定边框(下)
91 3
|
9月前
|
前端开发
如何用SVG画一个特定边框(上)
如何用SVG画一个特定边框(上)
102 1
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
348 0
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
150 1
SVG Path(四)贝塞尔曲线命令
SVG Path(四)贝塞尔曲线命令
227 0
|
前端开发
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
158 0