SVG路径(path)中的圆弧(A)指令的语法说明及计算逻辑

原创 2018年03月23日 11:06:40

SVG中的路径数据,即path元素的 d 属性,有一系列的路径绘制指令,其中椭圆弧指令(A)最复杂,不算椭圆弧起始点的x,y坐标的话,依然有 个参数。

SVG椭圆弧指令的参数,与Canvas等圆弧指令的参数有很大差别,Canvas中使用圆心、半径、起始角度、结束角度等为参数,而SVG使用起始点坐标、半径、方向、结束点坐标等为参数。

SVG之所以实现为这样的参数形式,是因为SVG中的路径包含的每段子路径具有依次首尾相连的特性,这样每一段路径绘制的起点终点就比较明确直观。

(如果是需要计算SVG椭圆弧的中心和角度,可以参考我之前写的一篇博文:
《根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数》

SVG椭圆弧路径指令说明:

指令A (绝对) a (相对)
名称elliptical arc 椭圆弧
参数

(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

rx ry 是椭圆的两个半轴的长度。

x-axis-rotation 是椭圆相对于坐标系的旋转角度,角度而非弧度数。

large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。

sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。

x y 是圆弧终点的坐标。

描述从当前点绘制一段椭圆弧到点 (x, y),椭圆的大小和方向由 (rx, ry) 和 x-axis-rotation 参数决定, x-axis-rotation 参数表示椭圆整体相对于当前坐标系统的旋转角度。椭圆的中心坐标 (cx, cy) 会自动进行计算从而满足其它参数约束。large-arc-flag 和 sweep-flag 也被用于圆弧的计算与绘制。

实例:

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />


在其它参数确定的情况下,large-arc-flag 和 sweep-flag 的不同组合,共有 4 种情况,分别对应 4 段不同的椭圆弧。

<path d="M 125,75 a100,50 0 ?,? 100,50"
      style="fill:none; stroke:red; stroke-width:6"/>

把上面的 "?,?" 分别替换为 "0,0" "0,1" "1,0" "1,1" 就可以产生 4 种不同情况的椭圆弧:


SVG标准中的圆弧指令基本用法的说明(英文原文)


下面是SVG标准中的关于圆弧指令逻辑一段补充说明(W3C原文),对于完全理解其公式与算法有很大帮助。


F.6 Elliptical arc implementation notes

F.6.1 Elliptical arc syntax

An elliptical arc is a particular path command. As such, it is described by the following parameters in order:

(x1y1) are the absolute coordinates of the current point on the path, obtained from the last two parameters of the previous path command.

rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).

φ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.

fA is the large arc flag, and is 0 if an arc spanning less than or equal to 180 degrees is chosen, or 1 if an arc spanning greater than 180 degrees is chosen.

fS is the sweep flag, and is 0 if the line joining center to arc sweeps through decreasing angles, or 1 if it sweeps through increasing angles.

(x2y2) are the absolute coordinates of the final point of the arc.

This parameterization of elliptical arcs will be referred to as endpoint parameterization. One of the advantages of endpoint parameterization is that it permits a consistent path syntax in which all path commands end in the coordinates of the new "current point". The following notes give rules and formulas to help implementers deal with endpoint parameterization.

F.6.2 Out-of-range parameters

Arbitrary numerical values are permitted for all elliptical arc parameters, but where these values are invalid or out-of-range, an implementation must make sense of them as follows:

If the endpoints (x1y1) and (x2y2) are identical, then this is equivalent to omitting the elliptical arc segment entirely.

If rx = 0 or ry = 0 then this arc is treated as a straight line segment (a "lineto") joining the endpoints.

If rx or ry have negative signs, these are dropped; the absolute value is used instead.

If rxry and φ are such that there is no solution (basically, the ellipse is not big enough to reach from (x1y1) to (x2y2)) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).

φ is taken mod 360 degrees.

Any nonzero value for either of the flags fA or fS is taken to mean the value 1.

This forgiving yet consistent treatment of out-of-range values ensures that:

  • The inevitable approximations arising from computer arithmetic cannot cause a valid set of values written by one SVG implementation to be treated as invalid when read by another SVG implementation. This would otherwise be a problem for common boundary cases such as a semicircular arc.
  • Continuous animations that cause parameters to pass through invalid values are not a problem. The motion remains continuous.

F.6.3 Parameterization alternatives

An arbitrary point (xy) on the elliptical arc can be described by the 2-dimensional matrix equation

equation F.6.3.1(F.6.3.1)

(cxcy) are the coordinates of the center of the ellipse.

rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).

θ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.

θ ranges from:

  • θ1 which is the start angle of the elliptical arc prior to the stretch and rotate operations.
  • θ2 which is the end angle of the elliptical arc prior to the stretch and rotate operations.
  • Δθ which is the difference between these two angles.

If one thinks of an ellipse as a circle that has been stretched and then rotated, then θ1θ2 and Δθ are the start angle, end angle and sweep angle, respectively of the arc prior to the stretch and rotate operations. This leads to an alternate parameterization which is common among graphics APIs, which will be referred to as center parameterization. In the next sections, formulas are given for mapping in both directions between center parameterization and endpoint parameterization.

F.6.4 Conversion from center to endpoint parameterization

Given the following variables:

cx cy rx ry φ θ1 Δθ

the task is to find:

x1 y1 x2 y2 fA fS

This can be achieved using the following formulas:

Equation F.6.4.1(F.6.4.1)
Equation F.6.4.2(F.6.4.2)
Equation F.6.4.3(F.6.4.3)
Equation F.6.4.4(F.6.4.4)

F.6.5 Conversion from endpoint to center parameterization

Given the following variables:

x1 y1 x2 y2 fA fS rx ry φ

the task is to find:

cx cy θ1 Δθ

The equations simplify after a translation which places the origin at the midpoint of the line joining (x1y1) to (x2y2), followed by a rotation to line up the coordinate axes with the axes of the ellipse. All transformed coordinates will be written with primes. They are computed as intermediate values on the way toward finding the required center parameterization variables. This procedure consists of the following steps:

  • Step 1: Compute (x1′, y1′)

    Equation F.6.5.1(F.6.5.1)
  • Step 2: Compute (cx′, cy′)

    Equation F.6.5.2(F.6.5.2)

    where the + sign is chosen if fA ≠ fS, and the − sign is chosen if fA = fS.

  • Step 3: Compute (cxcyfrom (cx′, cy′)

    Equation F.6.5.3(F.6.5.3)
  • Step 4: Compute θ1 and Δθ

    In general, the angle between two vectors (uxuy) and (vxvy) can be computed as

    Equation F.6.5.4(F.6.5.4)

    where the ± sign appearing here is the sign of ux vy − uy vx.

    This angle function can be used to express θ1 and Δθ as follows:

    Equation F.6.5.5(F.6.5.5)
    Equation F.6.5.6(F.6.5.6)

    where θ1 is fixed in the range −360° < Δθ < 360° such that:

    if fS = 0, then Δθ < 0,

    else if fS = 1, then Δθ > 0.

    In other words, if fS = 0 and the right side of (F.6.5.6) is greater than 0, then subtract 360°, whereas if fS = 1 and the right side of (F.6.5.6) is less than 0, then add 360°. In all other cases leave it as is.

F.6.6 Correction of out-of-range radii

This section formalizes the adjustments to out-of-range rx and ry mentioned in F.6.2. Algorithmically these adjustments consist of the following steps:

  • Step 1: Ensure radii are non-zero

    If rx = 0 or ry = 0, then treat this as a straight line from (x1y1) to (x2y2) and stop. Otherwise,

  • Step 2: Ensure radii are positive

    Take the absolute value of rx and ry:

    Equation F.6.6.1(F.6.6.1)
  • Step 3: Ensure radii are large enough

    Using the primed coordinate values of equation (F.6.5.1), compute

    Equation F.6.6.2(F.6.6.2)

    If the result of the above equation is less than or equal to 1, then no further change need be made to rx and ry. If the result of the above equation is greater than 1, then make the replacements

    Equation F.6.6.3(F.6.6.3)
  • Step 4: Proceed with computations

    Proceed with the remaining elliptical arc computations, such as those in section F.6.5.  Note: As a consequence of the radii corrections in this section, equation (F.6.5.2) for the center of the ellipse always has at least one solution (i.e. the radicand is never negative).  In the case that the radii are scaled up using equation (F.6.6.3), the radicand of (F.6.5.2) is zero and there is exactly one solution for the center of the ellipse.


【HTML5】SVG——pathA

Arcs //
  • newcong0123
  • newcong0123
  • 2016-12-25 10:16:54
  • 218

svg path的A指令

A指令  Elliptical Arc,允许不闭合。可以想像成是椭圆的某一段,共七个参数。  RX,RY指所在椭圆的半轴大小  XROTATION指椭圆的X轴与水平方向顺时针方向夹角,可以想像成...
  • flyonok
  • flyonok
  • 2014-06-03 16:56:33
  • 5219

SVG path绘制百分比圆弧,给力啊

利用SVG的circle可以绘制百分比圆弧,但总觉得有点不够高端,相比起来,我更喜欢利用SVG的path来绘制百分比圆弧,因为其中会利用到绘制圆弧的基本数学知识(我已经把数学还给了老师,从网络上抓取别...
  • qing_gee
  • qing_gee
  • 2016-05-25 17:30:32
  • 22608

svg Path 路径指令

PATH十种指令:括号内为相应参数,详细解释见后文。M = moveto(M X,Y) L = lineto(L X,Y) H = horizontal lineto(H X) V = vert...
  • zhou8622
  • zhou8622
  • 2016-06-29 16:41:23
  • 1891

SVG(可缩放矢量图形)基本图形绘制方法与path路径命令

SVG(Scalable Vector Graphics)可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas,它更适合作一些小图...
  • q1056843325
  • q1056843325
  • 2017-01-15 15:12:37
  • 2306

svg中的path指令分析

使用path标签时,就像用指令的方式来控制一只画笔,比如:移动画笔到某一坐标位置,画一条线,画一条曲线,完事了抬起画笔,OVER!   path支持的指令有:   M = mo...
  • bjiang927
  • bjiang927
  • 2015-09-22 15:53:23
  • 833

SVG矢量绘图 path路径详解(基本画法)

SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了。 先看一下path标签的基本用法: path标签通过属性d来定义路径,定义信息由一段字符串构成,另外pat...
  • u013291076
  • u013291076
  • 2014-05-26 14:08:08
  • 4777

SVG路径命令总结

命令 参数 效果 M m x y  移动画笔到给定坐标,即起点 L l x y  绘制一条到给定坐标的线,可提供多组坐标绘制折线 H h x 绘制一条...
  • Selina_Chan
  • Selina_Chan
  • 2016-06-13 09:55:13
  • 773

svg绘制圆弧(一)

svg绘制圆弧的案例
  • jicai520
  • jicai520
  • 2017-02-15 16:12:47
  • 362

利用SVG中path实现平滑曲线

前言:SVG中实现直线很简单,但是实现曲线稍稍略显复杂!在实际的开发场景中直线不能满足很多的需求,如下图所示各个图形之间采用曲线连接,如果换成直线整个风格就略显僵硬,所以曲线在很多场合下还是比较适用的...
  • ouyang111222
  • ouyang111222
  • 2016-04-14 21:09:01
  • 7023
收藏助手
不良信息举报
您举报文章:SVG路径(path)中的圆弧(A)指令的语法说明及计算逻辑
举报原因:
原因补充:

(最多只允许输入30个字)