小试SVG之新手小白入门教程(7)

日期：2020-05-11 栏目：程序人生 浏览：次

在上面几个例子中，两种曲线都生成了同样的结果，虽然三次贝塞尔允许更多的自由度，但是决定使用哪种曲线还要依照具体情形以及对称曲线的数量来定

弧度（Arcs）

在svg中也可以创建弧度这种曲线，它通过A指令来指定，A指令可以接收7个参数

  • rx：x轴半径
  • ry：y轴半径
  • x-axis-rotation：弧形的旋转角度
  • large-arc-flag：决定弧线是大于180度好事小于180度，0表示小角度弧，1表示大角度弧
  • sweep-flag：表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
  • x：弧形终点的横坐标
  • y：弧形终点的纵坐标

示例：

 <?xml version="1.0" standalone="no"?>
 <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <path d="M80 80
   A 45 45, 0, 0, 0, 125 125
   L 125 80 Z" fill="green"/>
 <path d="M230 80
   A 45 45, 0, 1, 0, 275 125
   L 275 80 Z" fill="red"/>
 <path d="M80 230
   A 45 45, 0, 0, 1, 125 275
   L 125 230 Z" fill="purple"/>
 <path d="M230 230
   A 45 45, 0, 1, 1, 275 275
   L 275 230 Z" fill="blue"/>
 </svg>

饼图