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>

相关文章
|
存储 Go
Go 浅析主流日志库:从设计层学习如何集成日志轮转与切割功能
本文将探讨几个热门的 go 日志库如 logrus、zap 和官网的 slog,我将分析这些库的的关键设计元素,探讨它们是如何支持日志轮转与切割功能的配置。
732 0
Go 浅析主流日志库:从设计层学习如何集成日志轮转与切割功能
uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
2115 0
|
前端开发 数据处理
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
52806 11
|
存储 消息中间件 JavaScript
vue组件传值的12种方式
【10月更文挑战第1天】
1536 159
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
JSON Go 数据格式
Go slog 包:开启结构化日志的奇妙之旅
本文对 go 语言里的 slog 包进行了详细介绍,包括基本的使用、Logger 实例的创建和高效输出日志以及自定义日志信息等内容。
943 0
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
424 1
|
JavaScript 前端开发 编译器
Vue组件(Component)
Vue组件(Component)
452 3