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

2017-12-26 09:58| 发布者: admin| 查看: 996| 评论: 0|来自: 钱柜手机网页版

<path>元素基本用法参阅SVG <path>路径元素一章节。

本章节将介绍一下A(a)指令的用法,首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:300px;
}
</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(a)命令用法:

语法结构如下:

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

(1).rx/ry:分别规定x轴和y轴方向上的半径长度,如果两者相同,则绘制一个正圆,否则是一个椭圆。

(2).x-axis-rotation:规定圆弧的横轴与坐标系x轴的夹角,正数表示顺时针旋转,负数代表逆时针旋转。

(3).large-arc-flag:规定绘制较大弧线还是绘制较小弧线;在半径确定的情况下,两点之间绘制一条弧线,弧线的长度会有两种情况;1表示大角度弧线,0 代表小角度弧线。

(4).sweep-flag:规定绘制方向,1代表顺时针方向,0 代表逆时针方向。

(5).x/y:规定弧线终点坐标。

掐面代码的A命令的参数分解如下:

(1).rx/ry:值都是30。

(2).x-axis-rotation:旋转0度,后面会有单独代码演示。

(3).large-arc-flag:值为0,表示绘制较小的弧度。

(4).sweep-flag:值为0,表示逆时针绘制。

(5).弧线的终点坐标是(70,70)。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:300px;
}
</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>

再来看x-axis-rotation参数的作用,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border:1px solid red;
  margin:100px;
  width:300px;
  height:300px;
}
</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>

代码演示的非常清晰,解析如下:

(1).旋转点是圆弧绘制的起点坐标。

(2).正数是顺时针旋转,负数为逆时针旋转。

(3).角度是圆弧的x轴(也叫横轴)与用户坐标系x轴的夹角。

关于半径长度的问题:

这个问题也许很少人关注,网上教程上也鲜有介绍,但是实际应用中可能会碰到,还是要介绍一下。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style>
svg {
  border: 1px solid red;
  margin: 100px;
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M50,50
        A10,10 0 0,1 100,100"
        stroke="black"
        fill="green"
        stroke-width="2"
        fill-opacity="0.5" />
  </svg>
</body>
</html>

有没有感觉上面的代码有问题,x轴和y轴的半径都是10,实际表现明显不是10。

原因如下:

绘制一条包含点(50,50)和(100,100)的弧线,x轴和y轴的半径都超过10,所以这时会绘制一个半径最小的弧线;怎样可以做到半径最小呢,只要点(50,50)和(100,100)之间的连线恰好穿过圆弧的圆心位置。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部