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>

相关文章
|
2月前
|
Web App开发 移动开发 前端开发
SVG
这段代码将引用刚才定义的圆形,并将其放置在(20,20)的位置,大小为60x60。 除了<svg>和<use>元素外,SVG还提供了许多其他的元素和属性,可以帮助你创建各种复杂的图形。比如<rect>、<line>、<polygon>等元素,可以用来创建矩形、线条和多边形等。
19 0
|
8月前
用svg实现一个环形进度条
用svg实现一个环形进度条
40 0
|
9月前
SVG Path(四)贝塞尔曲线命令
SVG Path(四)贝塞尔曲线命令
60 0
|
前端开发 JavaScript 小程序
SVG格式的Icon,用了你就知道有多香
继阿里的iconfont之后,字节跳动也出品了自己的矢量图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景。
426 0
SVG格式的Icon,用了你就知道有多香
|
XML 编解码 前端开发
|
XML 移动开发 编解码
HTML5绘图方式Canvas和SVG的区别
HTML5绘图方式Canvas和SVG的区别
418 0
|
前端开发 人工智能 JavaScript
SVG路径动画解密
原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.
953 0
|
XML JavaScript Java