您的位置:首页> HTML5教程> SVG教程

SVG <path> 元素A指令绘制弧线

2019-4-22 13:27| 作者: admin| 查看: 1683| 评论: 0|来自: 蚂蚁部落

<path>元素具有强大的绘图能力,能够绘制灵活复杂多样的图案。

之所以如此强大,是因为它具有多种多样的图形绘制命令,本文只介绍一下弧线绘制指令A。

A是arc的缩写,翻译成汉语具有"圆弧"的意思,了解命令缩写的全称在一定程度上有助于记忆。

关于<path>元素的基本用法和一些基本规则本文不做介绍,具体参阅SVG <path> 路径元素一章节。

首先通过一段代码实例感受一下A指定的作用,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:150px;
  height:100px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M40,20
          A30,30 0 0,0 70,70"
          stroke="red"
          stroke-width="2"
          fill="none" />
  </svg>                            
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/132808wppncapzzpf0caf2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,通过A指令绘制了一段弧线,下面分步介绍一下此命令的具体用法。

此命令区分大小写,也就是说A与a是不同的,大写表示绝对坐标,也就是命令中的坐标都是相对于坐标系的原点,小写表示相对坐标,也就是相对于上一个点的增量。

语法结构:

[HTML] 纯文本查看 复制代码
A(a)rx ry x-axis-rotation large-arc-flag sweep-flag x y

命令解析如下:

(1).rx:规定圆弧在x轴方向的半径吃尺寸。

(2).ry :规定元素在y轴方向的半径尺寸,如果与rx相等则正圆圆弧,否则是椭圆圆弧。

(3).x-axis-rotation:规定圆弧的横轴与x轴的夹角,正数表示顺时针旋转,反之表示逆时针。

(4).large-arc-flag:规定绘制大圆弧还是小圆弧,1表示绘制大角度圆弧,0表示绘制小角度圆弧。

(5).sweep-flag:规定绘制顺时针方向绘制,还是逆时针方向绘制,1表示顺时针,0表示逆时针。

(6).x:规定圆弧终点的x轴坐标。

(7).y:规定圆弧终点的y轴坐标。

上面对命令的细节进行了概念上的介绍,相信相当大的一部分朋友会感觉一头雾水。

不用担心,后面会结合代码实例绘制图案对此命令各个细节进行详细分析,理解起来更为轻松。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:150px;
  height:100px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M40,20
      A30,30 0 0,0 70,70"
      stroke="red"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 0,1 70,70"
      stroke="green"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 1,0 70,70"
      stroke="blue"
      stroke-width="2"
      fill="none" />
    <path d="M40,20
      A30,30 0 1,1 70,70"
      stroke="yellow"
      stroke-width="2"
      fill="none" />
  </svg>                            
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/132935nvtut4g7le4rev5a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分析如下:

(1).上述代码绘制了四个不同颜色的圆弧。

(2).四个圆弧的半径尺寸、圆弧绘制的起点坐标和圆弧绘制的中点坐标都是相同的。

(3).它们的不同点在于中间靠后的二个参数,也就是large-arc-flag和sweep-flag。

(4).圆弧半径与绘制的起点与终点确定之后,你既可以选择绘制较大一侧的弧,也可以选择绘制较小一侧的弧,当然也可以顺时针绘制,也可以逆时针绘制,当然圆弧也有可能两侧同样大。

(5).红色圆弧large-arc-flag和sweep-flag值都为0,表示绘制较小弧度和逆时针绘制,蓝色圆弧同样是逆时针绘制,但绘制的是较大的弧度,两个一起对比是不是非常容易理解了。

(6).绿色圆弧是顺时针绘制,绘制较小圆弧,黄色圆弧同样是顺时针绘制,绘制较大圆弧。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  margin:100px;
  width:450px;
  height:400px;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M10 315
      L110 215
      A30 50 0 0 1 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.5" />
    <path d="M10 315
      L110 215
      A30 50 0 1 0 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.2" />
    <path d="M10 315
      L110 215
      A30 50 30 0 1 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.5" />
    <path d="M10 315
      L110 215
      A30 50 30 1 0 162.55 162.45
      L172.55 152.45
      L315 10"
      stroke="black"
      fill="green"
      stroke-width="2"
      fill-opacity="0.2" />
  </svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133002txsqhq7qxxdgxdz2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码用于演示x-axis-rotation的功能,上述代码简单分析如下:

(1).为了便于观察我们绘制了四个圆弧,首先将后面两个删除,那么就会剩下如下图案:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133019x7vkkvvxpio7vtrk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

两个组合成一个整个椭圆,椭圆没有任何旋转效果,也就是没有规定x-axis-rotation值为0。

可以看到椭圆竖直站立,黑色线条只是一条为了便于观察的辅助线,没有其他含义。

(2).下面再将后面两个图形绘制出来:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133045bc6d2zqd0cee8t0y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

后面的图案规定了x-axis-rotation属性值,那么就会进行旋转。

旋转点是圆弧绘制的起点坐标,正数是顺时针旋转,负数为逆时针旋转。

角度是圆弧的x轴(也叫横轴)与用户坐标系x轴的夹角,可以看到整个椭圆进行了顺时针旋转。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  margin: 100px;
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M50,50
    A2,2 0 0,1 100,100"
    stroke="black"
    fill="green"
    stroke-width="2"
    fill-opacity="0.5" />
 </svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/22/133108ally9jh39j02t97h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

简单代码分析如下:

(1).上述代码规定圆弧的半径为2,但是实际绘制的圆的半径明显要大于2。

(2).是不是浏览器解析出现了bug,其实并不是,绘制的起点坐标是(50,50),终点坐标是(100,100),包含这两个坐标的圆弧再怎么绘制,圆弧的半径也是远大于2的,所以浏览器就自作主张绘制一个半径尽可能小的圆弧,也就是起点与终点连接起来恰好是圆的直径,上述类似的情况一定要注意下。


鲜花

握手

雷人

路过

鸡蛋
返回顶部