图形绘制,基本造型转换那一个事

闲聊 SVG 基本造型转换那么些事

2017/01/20 · HTML5 ·
SVG

原文出处:
坑坑洼洼实验室   

美高梅开户网址 1

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形,
主要优势在于可缩放的还要不会潜移默化图片的成色。

点评:SVG提供了累累的基本造型,这几个因素得以一贯利用,这点比canvas好多了,在这里就不多说了,感兴趣的情侣能够驾驭下,或许本文对您的询问SVG的图形绘制有所协助

主旨造型
  SVG提供了好多的基本造型,那几个要素得以直接行使,那点比canvas好多了。废话不说了,直接看例子,这几个最直接:
<svg width=”200″ height=”250″>
  <rect x=”10″ y=”10″ width=”30″ height=”30″ stroke=”black”
fill=”transparent” stroke-width=”5″/>
  <rect x=”60″ y=”10″ rx=”10″ ry=”10″ width=”30″ height=”30″
stroke=”black” fill=”transparent” stroke-width=”5″/>

一、前言

前段时间商量 SVG 压缩优化,发现SVG预订义的
rectcircleellipselinepolylinepolygon
各样基本造型可由此path路径转换已毕,那样可以在自然程度上减小代码量。不仅如此,大家常用的
SVG Path
动画(路径动画),是以操作path中三个属性值stroke-dasharraystroke-dashoffset来贯彻,基本造型转换为path路径,有利于贯彻路径动画。

 

主旨造型 SVG提供了诸多的中央造型,这么些要素得以一直利用,那一点比canvas好多了。废话不说了,直接看例子,这些最直白:

  <circle cx=”25″ cy=”75″ r=”20″ stroke=”red” fill=”transparent”
stroke-width=”5″/>
  <ellipse cx=”75″ cy=”75″ rx=”20″ ry=”5″ stroke=”red”
fill=”transparent” stroke-width=”5″/>

二、SVG基本造型

SVG
提供了rectcircleellipselinepolylinepolygon各种基本造型用于图形绘制,这一个造型能够从来用来绘制一些主导的形态,如矩形、椭圆等,而复杂图形的绘图则须求采取path 路径来完成。

美高梅开户网址 2

SVG 在html 中常用的艺术

代码如下:

  <line x1=”10″ x2=”50″ y1=”110″ y2=”150″ stroke=”orange”
fill=”transparent” stroke-width=”5″/>
  <polyline points=”60 110 65 120 70 115 75 130 80 125 85 140 90 135
95 150 100 145″
      stroke=”orange” fill=”transparent” stroke-width=”5″/>

1.rect 矩形

XHTML

美高梅开户网址,<rect x=”10″ y=”10″ width=”30″ height=”30″/> <rect x=”60″
y=”10″ rx=”10″ ry=”10″ width=”30″ height=”30″/>

1
2
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

SVG中rect要素用于绘制矩形、圆角矩形,含有6个主导属性用于控制矩形的形制以及坐标,具体如下:

x 矩形左上角x地方, 默许值为 0 y 矩形左上角y地方, 默认值为 0 width
矩形的大幅度, 无法为负值否则报错, 0 值不绘制 height 矩形的可观,
不能为负值否则报错, 0 值不绘制 rx 圆角x方向半径, 不可能为负值否则报错 ry
圆角y方向半径, 不可以为负值否则报错

1
2
3
4
5
6
x 矩形左上角x位置, 默认值为 0
y 矩形左上角y位置, 默认值为 0
width 矩形的宽度, 不能为负值否则报错, 0 值不绘制
height 矩形的高度, 不能为负值否则报错, 0 值不绘制
rx 圆角x方向半径, 不能为负值否则报错
ry 圆角y方向半径, 不能为负值否则报错

那里须要小心,rxry 的还有如下规则:

  • rxry 都并未安装, 则 rx = 0 ry = 0
  • rxry 有一个值为0, 则相当于 rx = 0 ry = 0,圆角无益
  • rxry 有一个被设置, 则全体取那个被安装的值
  • rx 的最大值为 width 的一半, ry 的最大值为 height 的一半
JavaScript

rx = rx || ry || 0; ry = ry || rx || 0;   rx = rx &gt; width / 2 ?
width / 2 : rx; ry = ry &gt; height / 2 ? height / 2 : ry;   if(0
=== rx || 0 === ry){ rx = 0, ry = 0;
//圆角不生效,等同于,rx,ry都为0 }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-10">
10
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f49eccc27a188181481-1" class="crayon-line">
rx = rx || ry || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-2" class="crayon-line crayon-striped-line">
ry = ry || rx || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-4" class="crayon-line crayon-striped-line">
rx = rx &gt; width / 2 ? width / 2 : rx;
</div>
<div id="crayon-5b8f49eccc27a188181481-5" class="crayon-line">
ry = ry &gt; height / 2 ? height / 2 : ry;
</div>
<div id="crayon-5b8f49eccc27a188181481-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-7" class="crayon-line">
if(0 === rx || 0 === ry){
</div>
<div id="crayon-5b8f49eccc27a188181481-8" class="crayon-line crayon-striped-line">
rx = 0,
</div>
<div id="crayon-5b8f49eccc27a188181481-9" class="crayon-line">
ry = 0; //圆角不生效,等同于,rx,ry都为0
</div>
<div id="crayon-5b8f49eccc27a188181481-10" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

1.应用<img>元平素放手SVG图像

<svg width=”200″ height=”250″>
<rect x=”10″ y=”10″ width=”30″ height=”30″ stroke=”black”
fill=”transparent” stroke-width=”5″/>
<rect x=”60″ y=”10″ rx=”10″ ry=”10″ width=”30″ height=”30″
stroke=”black” fill=”transparent” stroke-width=”5″/>
<circle cx=”25″ cy=”75″ r=”20″ stroke=”red” fill=”transparent”
stroke-width=”5″/>
<ellipse cx=”75″ cy=”75″ rx=”20″ ry=”5″ stroke=”red”
fill=”transparent” stroke-width=”5″/>
<line x1=”10″ x2=”50″ y1=”110″ y2=”150″ stroke=”orange”
fill=”transparent” stroke-width=”5″/>
<polyline points=”60 110 65 120 70 115 75 130 80 125 85 140 90 135 95
150 100 145″
stroke=”orange” fill=”transparent” stroke-width=”5″/>
<polygon points=”50 160 55 180 70 180 60 190 65 205 50 195 35 205 40
190 30 180 45 180″
stroke=”green” fill=”transparent” stroke-width=”5″/>
<path d=”M20,230 Q40,205 50,230 T90,230″ fill=”none” stroke=”blue”
stroke-width=”5″/>
</svg>

  <polygon points=”50 160 55 180 70 180 60 190 65 205 50 195 35 205
40 190 30 180 45 180″
      stroke=”green” fill=”transparent” stroke-width=”5″/>

2.circle 圆形

XHTML

<circle cx=”100″ cy=”100″ r=”50″ fill=”#fff”></circle>

1
<circle cx="100" cy="100" r="50" fill="#fff"></circle>

SVG中circle要素用于绘制圆形,含有3个焦点品质用于控制圆形的坐标以及半径,具体如下:

r 半径 cx 圆心x位置, 默认为 0 cy 圆心y位置, 默认为 0

1
2
3
r 半径
cx 圆心x位置, 默认为 0
cy 圆心y位置, 默认为 0

<img src=”  width=”300″
/>

那段HTML显示的结果如下:

  <path d=”M20,230 Q40,205 50,230 T90,230″ fill=”none” stroke=”blue”
stroke-width=”5″/>
</svg>

3.ellipse 椭圆

XHTML

<ellipse cx=”75″ cy=”75″ rx=”20″ ry=”5″/>

1
<ellipse cx="75" cy="75" rx="20" ry="5"/>

SVG中ellipse要素用于绘制椭圆,是circle要素更通用的方式,含有4个着力质量用于控制椭圆的形态以及坐标,具体如下:

rx 椭圆x半径 ry 椭圆y半径 cx 圆心x位置, 默认为 0 cy 圆心y位置, 默认为 0

1
2
3
4
rx 椭圆x半径
ry 椭圆y半径
cx 圆心x位置, 默认为 0
cy 圆心y位置, 默认为 0

2.将SVG图像作为背景图像嵌入

美高梅开户网址 3

  那段HTML显示的结果如下:

4.line 直线

XHTML

<line x1=”10″ x2=”50″ y1=”110″ y2=”150″/>

1
<line x1="10" x2="50" y1="110" y2="150"/>

Line制图直线。它取七个点的地点作为品质,指定那条线的起源和极端地方。

x1 起点的x位置 y1 起点的y位置 x2 终点的x位置 y2 终点的y位置

1
2
3
4
x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

background: url(‘图形绘制,基本造型转换那一个事。) no-repeat;

 

 

5.polyline 折线

XHTML

<polyline points=”60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90
135, 95 150, 100 145″/>

1
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

polyline是一组连接在联名的直线。因为它可以有无数的点,折线的的所有点地点都坐落一个points属性中:

points
点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标
如0 0, 1 1, 2 2”

1
points 点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标 如0 0, 1 1, 2 2”

3.应用svg元素,通过代码将SVG图像嵌入到HTML代码中

其一例子画了重重造型:正常的矩形,带圆角的矩形,圆形,椭圆形,直线,折线,多边形,还有路径。那一个都属于基本的图样元素。固然绘制一个图片有很多样主意,比如矩形可以用rect完成,也可以用path等落实,但是大家仍然应该尽量保险SVG的情节短小精悍,易于阅读。 

美高梅开户网址 4 

6.polygon 多边形

XHTML

<polygon points=”50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35
205, 40 190, 30 180, 45 180″/>

1
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

polygon和折线很像,它们都是由连接一组点集的直线构成。分化的是,polygon的路子在最后一个点处自动回到第二个点。须要专注的是,矩形也是一种多边形,倘使必要更加多灵活性的话,你也足以用多边形创立一个矩形。

points
点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包涵2个数字,一个是x坐标,一个是y坐标
如0 0, 1 1, 2 2, 路径绘制完关闭图形”

1
points 点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标 如0 0, 1 1, 2 2, 路径绘制完闭合图形”

<svg width=”100%” height=”100%”>

上面是种种造型的行使验证(那里只介绍控制图形形状和职分的中坚属性,填充等质量放到前面总计)。

其一例子画了重重形态:正常的矩形,带圆角的矩形,圆形,椭圆形,直线,折线,多边形,还有路径。这一个都属于大旨的图形元素。就算绘制一个图纸有很各种方法,比如矩形可以用rect已毕,也可以用path等落到实处,可是大家仍旧应该尽量保持SVG的始末短小精悍,易于阅读。
  上边是种种造型的应用表达(那里只介绍控制图形形状和岗位的骨干质量,填充等特性放到前面总计)。
矩形 – rect元素
  这一个元素有6个控制地点和形状的特性,分别是:
x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形高度。
rx:落成圆角效果时,圆角沿x轴的半径。
ry:已毕圆角效果时,圆角沿y轴的半径。
比如说上边例子中,完成了圆角意义,你也足以因而设置rx,ry为区其他值已毕椭圆角效果。
 
圆 – circle元素
  那个元素的属性很简单,紧即使概念圆心和半径:
r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。
 
椭圆 – ellipse元素
  这一个是尤其通用的圈子元素,你可以独家控制半长轴和半短轴的尺寸,来促成分裂的椭圆,很简单想到,当八个半轴相等时,就是正圆形了。
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。
 
直线 – line元素
  直线必要定义起源与终极即可:
x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。
 
折线 – polyline元素
  折线首如果要定义每条线段的端点即可,所以只必要一个点的聚集作为参数:
points:一多元的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以上边3个点
(0,0), (1,1)和(2,2)可以写成:”0 0, 1 1, 2 2″。
 
多边形 – polygon元素
  这几个因素就是比polyline元素多做一步,把最终一个点和第三个点连起来,形成密闭图形。参数是一律的。
points:一多重的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以上面3个点
(0,0), (1,1)和(2,2)可以写成:”0 0, 1 1, 2 2″。
 
路径 – path元素
  那几个是最通用,最强力的元素了;使用那几个元素你能够兑现任何其他的图片,不仅包涵地点那么些基本造型,也足以兑现像贝塞尔曲线那样的复杂形态;别的,使用path可以兑现平滑的交接线段,纵然也足以动用polyline来贯彻那种意义,不过急需提供的点众多,而且放大了意义也倒霉。那么些因素控制地方和形制的唯有一个参数:
d:一各种绘制指令和制图参数(点)组合成。
  绘制指令分为相对坐标指令和相对坐标指令三种,那二种指令使用的假名是一样的,就是大大小小写不等同,相对指令使用大写字母,坐标也是纯属坐标;相对指令使用相应的小写字母,点的坐标表示的都是偏移量。
纯属坐标绘制指令
  这组命令的参数代表的是相对坐标。假使当前画笔所在的地方为(x0,y0),则上边的相对化坐标指令代表的意义如下所示:

三、SVG path 路径

SVG
的路径<path>意义相当强大,它不但能创制基本造型,仍能创立更多复杂的样子。<path>途径是由一些下令来控制的,每一个命令对应一个字母,并且区分轻重缓急写,大写主要代表相对定位,小写表示绝对固化。<path>
通过品质 d 来定义路径, d 是一名目繁多命令的聚集,主要有以下几个指令:

美高梅开户网址 5

普通大多数形象,都可以经过指令M(m)L(l)H(h)V(v)A(a)来落实,注意更加要区分轻重缓急写,相对与相对坐标处境,转换时推荐使用相对路径可减掉代码量,例如:

// 以下多个等价 d=’M 10 10 20 20′ // (10, 10) (20 20) 都是纯属坐标 d=’M
10 10 L 20 20′   // 以下七个等价 d=’m 10 10 20 20′ // (10, 10) 相对坐标,
(20 20) 相对坐标 d=’M 10 10 l 20 20′

1
2
3
4
5
6
7
// 以下两个等价
d=’M 10 10 20 20′ // (10, 10) (20 20) 都是绝对坐标
d=’M 10 10 L 20 20′
 
// 以下两个等价
d=’m 10 10 20 20′ // (10, 10) 绝对坐标, (20 20) 相对坐标
d=’M 10 10 l 20 20′

<rect x=”20″ y=”20″ width=”250″
height=”250″style=”fill:#fecdddd;”/>

矩形 – rect元素 这几个因素有6个控制地方和形制的性质,分别是:
x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形高度。
rx:完成圆角效果时,圆角沿x轴的半径。
ry:完毕圆角效果时,圆角沿y轴的半径。
诸如上边例子中,完成了圆角效应,你也得以透过设置rx,ry为区其余值达成椭圆角效果。

 

四、SVG 基本造型路径转换原理

</svg>

圆 – circle元素 本条因素的属性很简短,紧即使概念圆心和半径:
r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。

指令 参数 说明
M x y 将画笔移动到点(x,y)
L x y 画笔从当前的点绘制线段到点(x,y)
H 画笔从当前的点绘制水平线段到点(x,y0)
V 画笔从当前的点绘制竖直线段到点(x0,y)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 画笔从当前的点绘制一段圆弧到点(x,y)
C x1 y1, x2 y2, x y 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S x2 y2, x y 特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q x1 y1, x y  绘制二次贝塞尔曲线到点(x,y)
T x y 特殊版本的二次贝塞尔曲线(省略控制点)
Z 无参数 绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

1.rect to path

正如图所示,一个 rect 是由 4 个弧和 4 个线段构成;如若 rect 没有设置
rx 和 ry 则 rect 只是由 4 个线段构成。rect 转换为 path 只必要将 A
~ H 之间的弧和线段依次完成即可。

美高梅开户网址 6

JavaScript

function rect2path(x, y, width, height, rx, ry) { /* * rx 和 ry
的条条框框是: * 1. 倘使内部一个装置为 0 则圆角不生效 * 2.
比方有一个未曾安装则取值为另一个 */ rx = rx || ry || 0; ry = ry || rx
|| 0;   //非数值单位总结,如当宽度像100%则移除 if (isNaN(x – y + width –
height + rx – ry)) return;   rx = rx > width / 2 ? width / 2 : rx; ry
= ry > height / 2 ? height / 2 : ry;   //要是其中一个装置为 0
则圆角不见效 if(0 == rx || 0 == ry){ // var path = // ‘M’ + x + ‘ ‘ + y

  • // ‘H’ + (x + width) + 不引进用相对路径,相对路径节省代码量 // ‘V’ +
    (y + height) + // ‘H’ + x + // ‘z’; var path = ‘M’ + x + ‘ ‘ + y + ‘h’ +
    width + ‘v’ + height + ‘h’ + -width + ‘z’; }else{ var path = ‘M’ + x + ‘
    ‘ + (y+ry) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + (-ry) + ‘h’ +
    (width – rx – rx) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + ry +
    ‘v’ + (height – ry -ry) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘
  • ry + ‘h’ + (rx + rx -width) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx)
  • ‘ ‘ + (-ry) + ‘z’; }   return path; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function rect2path(x, y, width, height, rx, ry) {
/*
* rx 和 ry 的规则是:
* 1. 如果其中一个设置为 0 则圆角不生效
* 2. 如果有一个没有设置则取值为另一个
*/
rx = rx || ry || 0;
ry = ry || rx || 0;
 
//非数值单位计算,如当宽度像100%则移除
if (isNaN(x – y + width – height + rx – ry)) return;
 
rx = rx > width / 2 ? width / 2 : rx;
ry = ry > height / 2 ? height / 2 : ry;
 
//如果其中一个设置为 0 则圆角不生效
if(0 == rx || 0 == ry){
// var path =
// ‘M’ + x + ‘ ‘ + y +
// ‘H’ + (x + width) + 不推荐用绝对路径,相对路径节省代码量
// ‘V’ + (y + height) +
// ‘H’ + x +
// ‘z’;
var path =
‘M’ + x + ‘ ‘ + y +
‘h’ + width +
‘v’ + height +
‘h’ + -width +
‘z’;
}else{
var path =
‘M’ + x + ‘ ‘ + (y+ry) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + (-ry) +
‘h’ + (width – rx – rx) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + ry +
‘v’ + (height – ry -ry) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘ + ry +
‘h’ + (rx + rx -width) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘ + (-ry) +
‘z’;
}
 
return path;
}

兼容性

椭圆 – ellipse元素 其一是更进一步通用的圈子元素,你可以独家控制半长轴和半短轴的长短,来落到实处差别的椭圆,很简单想到,当五个半轴相等时,就是正圆形了。
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。

  

2.circle/ellipse to path

圆可就是是一种特殊的扁圆形,即 rx 与 ry 相等的扁圆形,所以可以置身一起谈论。
椭圆可以视作A点到C做180度顺时针画弧、C点到A做180度顺时针画弧即可。

美高梅开户网址 7

JavaScript

function ellipse2path(cx, cy, rx, ry) {
//非数值单位测算,如当宽度像100%则移除 if (isNaN(cx – cy + rx – ry))
return;   var path = ‘M’ + (cx-rx) + ‘ ‘ + cy + ‘a’ + rx + ‘ ‘ + ry + ‘
0 1 0 ‘ + 2*rx + ‘ 0’ + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + (-2*rx) + ‘
0’ + ‘z’;   return path; }

1
2
3
4
5
6
7
8
9
10
11
12
function ellipse2path(cx, cy, rx, ry) {
//非数值单位计算,如当宽度像100%则移除
if (isNaN(cx – cy + rx – ry)) return;
 
var path =
‘M’ + (cx-rx) + ‘ ‘ + cy +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + 2*rx + ‘ 0’ +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + (-2*rx) + ‘ 0’ +
‘z’;
 
return path;
}

IE   9~11          Firefox   40 +       Chrome  43+     Safari   8+    
 Opera  32+

直线 – line元素 直线需求定义源点与终点即可:

运动画笔指令M,画直线指令:L,H,V,闭合指令Z都相比较简单;下边重点看看绘制曲线的多少个指令。
绘制圆弧指令:A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
  用圆弧连接2个点比较复杂,意况也很多,所以那一个命令有7个参数,分别控制曲线的的逐条属性。上边解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation
是此段弧所在的x轴与品位方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 意味着大角度弧线,0 代表小角度弧线。
sweep-flag 为1象征从源点到顶点弧线绕中央顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
  前四个参数和后五个参数就不多说了,很简短;上面就说说中间的3个参数:
x-axis-rotation代表旋转的角度,体会上面例子中圆弧的不等:
<svg width=”320px” height=”320px”>
  <path d=”M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10″ stroke=”black” fill=”green” stroke-width=”2″
fill-opacity=”0.5″/>
</svg>

3.line to path

相对来说比较简单,如下:

JavaScript

function line2path(x1, y1, x2, y2) {
//非数值单位测算,如当宽度像100%则移除 if (isNaN(x1 – y1 + x2 – y2))
return;   x1 = x1 || 0; y1 = y1 || 0; x2 = x2 || 0; y2 = y2 || 0;   var
path = ‘M’ + x1 + ‘ ‘+ y1 + ‘L’ + x2 + ‘ ‘ + y2; return path; }

1
2
3
4
5
6
7
8
9
10
11
12
function line2path(x1, y1, x2, y2) {
//非数值单位计算,如当宽度像100%则移除
if (isNaN(x1 – y1 + x2 – y2)) return;
 
x1 = x1 || 0;
y1 = y1 || 0;
x2 = x2 || 0;
y2 = y2 || 0;
 
var path = ‘M’ + x1 + ‘ ‘+ y1 + ‘L’ + x2 + ‘ ‘ + y2;
return path;
}

 

x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。

  上面的HTML画出下边的图样:

4.polyline/polygon to path

polyline折线、polygon多边形的转移为path相比接近,差距就是polygon多头形会闭合。

JavaScript

// polygon折线转换 points = [x1, y1, x2, y2, x3, y3 …]; function
polyline2path (points) { var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘); return path; }   // polygon多边形转换
points = [x1, y1, x2, y2, x3, y3 …]; function polygon2path (points)
{ var path = ‘M’ + points.slice(0,2).join(‘ ‘) + ‘L’ +
points.slice(2).join(‘ ‘) + ‘z’; return path; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// polygon折线转换
points = [x1, y1, x2, y2, x3, y3 …];
function polyline2path (points) {
var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘);
return path;
}
 
// polygon多边形转换
points = [x1, y1, x2, y2, x3, y3 …];
function polygon2path (points) {
var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘) + ‘z’;
return path;
}

svg sprites

折线 – polyline元素 折线紧若是要定义每条线段的端点即可,所以只须求一个点的成团作为参数:

 

五、convertpath 转换工具

为了方便处理SVG基本因素路径转换,本人抽空写了convertpath工具,具体如下:

安装:

Shell

npm i convertpath

1
npm i convertpath

使用:

JavaScript

const parse = require(‘convertpath’); parse.parse(“./test/test.svg”)
/** * <circle cx=”500″ cy=”500″ r=”20″ fill=”red”/> */
console.log(parse.toSimpleSvg())   /** * <path
d=”M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z”
fill=”red”/> */

1
2
3
4
5
6
7
8
9
10
const parse = require(‘convertpath’);
parse.parse("./test/test.svg")
/**
* <circle cx="500" cy="500" r="20" fill="red"/>
*/
console.log(parse.toSimpleSvg())
 
/**
* <path d="M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z" fill="red"/>
*/

参考资料:

Basic Shapes – SVG 1.1 (Second
Edition)
主导造型 – SVG |
MDN
SVG (一) 图形, 路径, 变换总计; 以及椭圆弧线,
贝塞尔曲线的详实分解
路径 – SVG |
MDN
XMLDOM

1 赞 1 收藏
评论

美高梅开户网址 8

svg sprites类似于css sprites,将次第svg合并在联名。

points:一种类的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下边3个点
(0,0), (1,1)和(2,2)能够写成:”0 0, 1 1, 2 2″。

美高梅开户网址 9 

最要紧的长处就是能压缩页面的加载时间,优化支出流程,以及保险页面中图纸元素的一致性。

多边形 – polygon元素 以此元素就是比polyline元素多做一步,把最后一个点和率先个点连起来,形成闭合图形。参数是一致的。
points:一文山会海的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下边3个点
(0,0), (1,1)和(2,2)可以写成:”0 0, 1 1, 2 2″。

从图中可以见见椭圆旋转参数的不等造成绘制的圆弧方向不相同,当然这么些参数对正圆来说没有影响。
large-arc-flag和sweep-flag控制了圆弧的高低和走向,体会下边例子中圆弧的例外:
<svg width=”325px” height=”325px”>
  <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>

履行中大家可以把整块的svg放在head头部,
由此得以在一处地点更新svg即可,而不是让svg的代码块散落在文档的相继地点。

路径 – path元素 这一个是最通用,最强力的要素了;使用这些因素你可以完成任何此外的图纸,不仅囊括地点那么些骨干造型,也落实像贝塞尔曲线那样的复杂性形态;其它,使用path能够完成平滑的连结线段,固然也得以采用polyline来贯彻那种效果,不过必要提供的点多多,而且放大了功效也不佳。这一个元素控制地点和形制的唯有一个参数:
d:一文山会海绘制指令和制图参数(点)组合成。

  那一个HTML绘制了下面的几幅图:

<head>

制图指令分为相对坐标指令和相持坐标指令三种,那三种指令使用的假名是均等的,就是大大小小写不均等,相对指令使用大写字母,坐标也是纯属坐标;相对指令使用相应的小写字母,点的坐标表示的都是偏移量。 

 

<meta charset=”utf-8″ />

相对坐标绘制指令 那组命令的参数代表的是相对坐标。假使当前画笔所在的地方为(x0,y0),则下边的相对坐标指令代表的意思如下所示:

美高梅开户网址 10 

<title>svg</title>

指令 参数 说明
M x y 将画笔移动到点(x,y)
L x y 画笔从当前的点绘制线段到点(x,y)
H 画笔从当前的点绘制水平线段到点(x,y0)
V 画笔从当前的点绘制竖直线段到点(x0,y)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 画笔从当前的点绘制一段圆弧到点(x,y)
C x1 y1, x2 y2, x y 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S x2 y2, x y 特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q x1 y1, x y  绘制二次贝塞尔曲线到点(x,y)
T x y 特殊版本的二次贝塞尔曲线(省略控制点)
Z 无参数 绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

 从地点可以见见,那多少个参数其实是绝无仅有确定一段圆弧必要的参数。那里也看到,SVG中的圆弧比canvas中的复杂一些。

<svg version=”1.1″ xmlns=”
xmlns:xlink=” width=”32″ height=”158″
viewBox=”0 0 32 158″>

运动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单;上面重点看看绘制曲线的多少个指令。

绘制三回贝塞尔曲线指令:C  x1 y1, x2 y2, x y          
  一回贝塞尔曲线有几个控制点,就是(x1,y1)和(x2,y2),最前面(x,y)代表曲线的终端。体会下边的事例:
<svg width=”190px” height=”160px”>
  <path d=”M10 10 C 20 20, 40 20, 50 10″ stroke=”black”
fill=”transparent”/>
  <path d=”M70 10 C 70 20, 120 20, 120 10″ stroke=”black”
fill=”transparent”/>
  <path d=”M130 10 C 120 20, 180 20, 170 10″ stroke=”black”
fill=”transparent”/>
  <path d=”M10 60 C 20 80, 40 80, 50 60″ stroke=”black”
fill=”transparent”/>
  <path d=”M70 60 C 70 80, 110 80, 110 60″ stroke=”black”
fill=”transparent”/>
  <path d=”M130 60 C 120 80, 180 80, 170 60″ stroke=”black”
fill=”transparent”/>
  <path d=”M10 110 C 20 140, 40 140, 50 110″ stroke=”black”
fill=”transparent”/>
  <path d=”M70 110 C 70 140, 110 140, 110 110″ stroke=”black”
fill=”transparent”/>
  <path d=”M130 110 C 120 140, 180 140, 170 110″ stroke=”black”
fill=”transparent”/>
</svg>

<!– SVG等省略  –>

绘制圆弧指令:A  rx ry x-axis-rotation large-arc-flag sweep-flag x y 用圆弧连接2个点相比复杂,情形也很多,所以这么些命令有7个参数,分别控制曲线的的各种属性。上面解释一下数值的意义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation
是此段弧所在的x轴与品位方向的夹角,即x轴的逆时针转动角度,负数代表顺时针转动的角度。
large-arc-flag 为1 象征大角度弧线,0 代表小角度弧线。
sweep-flag 为1意味从源点到极限弧线绕主题顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
前五个参数和后多个参数就不多说了,很简短;上边就说说中间的3个参数:
x-axis-rotation代表旋转的角度,体会下边例子中圆弧的差距:

  那一个HTML片段绘制了上边的图形:

</svg>

代码如下:

  
   美高梅开户网址 11

</head>

<svg width=”320px” height=”320px”>
<path d=”M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10″ stroke=”black” fill=”green” stroke-width=”2″
fill-opacity=”0.5″/>
</svg>

 

 

地方的HTML画出下边的图纸:

从地点大家得以见见,控制点控制了曲线的弧度。
 
独特版本的三次贝塞尔曲线:S  x2 y2, x y
  很多时候,为了绘制平滑的曲线,须求频仍连接绘制曲线。那些时候,为了平滑过渡,平常首个曲线的控制点是率先个曲线控制点在曲线其余一边的映射点。那么些时候可以选拔这么些简化版本。那里要留心的是,若是S指令前面没有任何的S指令或C指令,那几个时候会觉得五个控制点是同一的,退化成二次贝塞尔曲线的样板;假若S指令是用在别的一个S指令或者C指令前边,这几个时候背后这些S指令的第二个控制点会默许设置为眼前的这些曲线的第二个控制点的一个映射点,体会一下:
<svg width=”190px” height=”160px”>
  <path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″
stroke=”black” fill=”transparent”/>
</svg>

SVG形状

美高梅开户网址 12

  那一个HTML片段绘制如下图形:

矩形 <rect>

 
从图中得以看看椭圆旋转参数的不比造成绘制的拱形方向分裂,当然那么些参数对正圆来说没有影响。

 

<rect x=”20″ y=”20″ rx=”20″ ry=”20″ width=”250″ height=”100″
style=”fill:red;stroke:black; stroke-width:5;opacity:0.5″/>

large-arc-flag和sweep-flag控制了圆弧的轻重缓急和走向,体会上面例子中圆弧的不比:

美高梅开户网址 13 

诠释:x为x坐标,y为y坐标;width 和 height 分别为造型的万丈和增幅;rx 和
ry 属性可使矩形爆发圆角。

代码如下:

下边的S指令唯有第三个控制点,第四个控制点选用了前方的曲线指令的第一个控制点的一个映射点。

质量: fill 属性定义形状的填写颜色

<svg width=”325px” height=”325px”>
<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>

绘图二次贝塞尔曲线指令:Q  x1 y1, x y , T x y 
(特殊版本的二次贝塞尔曲线)
  二次贝塞尔曲线只有一个控制点(x1,y1),平常如下图所示:

stroke 属性定义图形边框的水彩

本条HTML绘制了上面的几幅图:

 

stroke-width 属性定义形状边框的肥瘦

美高梅开户网址 14

美高梅开户网址 15 

圆形 <circle>

 
从上边可以看看,那多少个参数其实是绝无仅有确定一段圆弧须要的参数。那里也来看,SVG中的圆弧比canvas中的复杂一些。

倘假诺连连的绘图曲线,同样可以拔取简化版本T。同样的,唯有T前面是Q或者T指令的时候,前面的T指令的操纵点会默许设置为眼前的曲线的控制点的映射点,体会一下:
<svg width=”190px” height=”160px”>
  <path d=”M10 80 Q 52.5 10, 95 80 T 180 80″ stroke=”black”
fill=”transparent”/>
</svg>

<circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″
fill=”red”/>

制图五回贝塞尔曲线指令:C  x1 y1, x2 y2, x y          

  那一个HTML片段绘制如下图形:

释疑:cx 和 cy分别为圆点的 x 和 y 坐标;r为半径。

几次贝塞尔曲线有四个控制点,就是(x1,y1)和(x2,y2),最终边(x,y)代表曲线的极端。体会上面的事例:

 

椭圆<ellipse>

代码如下:

美高梅开户网址 16 

<ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″
style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2″/>

<svg width=”190px” height=”160px”>
<path d=”M10 10 C 20 20, 40 20, 50 10″ stroke=”black”
fill=”transparent”/>
<path d=”M70 10 C 70 20, 120 20, 120 10″ stroke=”black”
fill=”transparent”/>
<path d=”M130 10 C 120 20, 180 20, 170 10″ stroke=”black”
fill=”transparent”/>
<path d=”M10 60 C 20 80, 40 80, 50 60″ stroke=”black”
fill=”transparent”/>
<path d=”M70 60 C 70 80, 110 80, 110 60″ stroke=”black”
fill=”transparent”/>
<path d=”M130 60 C 120 80, 180 80, 170 60″ stroke=”black”
fill=”transparent”/>
<path d=”M10 110 C 20 140, 40 140, 50 110″ stroke=”black”
fill=”transparent”/>
<path d=”M70 110 C 70 140, 110 140, 110 110″ stroke=”black”
fill=”transparent”/>
<path d=”M130 110 C 120 140, 180 140, 170 110″ stroke=”black”
fill=”transparent”/>
</svg>

 

诠释:cx 圆点的 x 坐标,cy 圆点的 y 坐标;rx 水平半径,ry 垂直半径。

本条HTML片段绘制了上面的图纸:
美高梅开户网址 17

同样的,若是T指令前边不是Q或者T指令,则觉得无控制点,画出来的是直线。

线<line>

 从地方大家可以见到,控制点控制了曲线的弧度。

相对坐标绘制指令
  与相对坐标绘制指令的假名是千篇一律的,只不过全体是小写表示。那组命令的参数中提到坐标的参数代表的是冲突坐标,意思就是参数代表的是从当前点到目的点的偏移量,正数就象征向轴正向偏移,负数代表向反向偏移。但是对Z指令来说,大小写没有区分。

<line x1=”0″ y1=”0″ x2=”300″ y2=”300″
style=”stroke:rgb(99,99,99);stroke-width:2″/>

分外版本的两遍贝塞尔曲线:S  x2 y2, x y

  这里要留心,相对坐标指令与相对坐标指令是能够勾兑使用的。有时混合使用可以牵动更灵活的画法。

表达:(x1,y1)为线条的始发坐标;(x2,y2)为线条的为止坐标。

成百上千时候,为了绘制平滑的曲线,须求频仍接二连三绘制曲线。那个时候,为了平滑过渡,寻常第三个曲线的控制点是第三个曲线控制点在曲线别的一方面的映射点。这些时候可以采用这几个简化版本。那里要小心的是,如若S指令前边没有其余的S指令或C指令,那一个时候会觉得多个控制点是同等的,退化成二次贝塞尔曲线的楷模;借使S指令是用在其它一个S指令或者C指令前边,那一个时候背后那个S指令的首先个控制点会默许设置为眼前的那几个曲线的第三个控制点的一个映射点,体会一下:

 

折线<polyline>

代码如下:

SVG path绘制注意事项:
  绘制带孔的图片时要留意:外层边的绘图需倘若逆时针顺序的,里面的洞的边的依次必须是顺时针的。唯有那样绘制的图样填充效果才会正确。

<polyline points=”0,0 0,20 20,20 20,40 40,40 40,60″
style=”fill:white;stroke:red;stroke-width:2″/>

<svg width=”190px” height=”160px”>
<path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″
stroke=”black” fill=”transparent”/>
</svg>

 

解说:points 属性定义多边形每个角的 x 和 y
坐标。为了可读性,提出x与y坐标用逗号分开,每个角之间的坐标用空格分开。

其一HTML片段绘制如下图形:

摘自  沙场秋点兵
 

多边形<polygon>

美高梅开户网址 18

SVG提供了许多的主导造型,这么些元素得以一向动用,那一点比canvas好多了。废话不说了,直接看例子,这么些最直白:
svg width=200…

<polygon points=”220,100 300,210 170,250″ style=”fill:#cccccc;
stroke:#000000;stroke-width:1″/>

上边的S指令唯有首个控制点,第四个控制点选择了面前的曲线指令的首个控制点的一个映射点。

分解:points 属性定义多边形每个角的 x 和 y 坐标。

制图二次贝塞尔曲线指令:Q  x1 y1, x y , T x
y  (特殊版本的二次贝塞尔曲线)
二次贝塞尔曲线唯有一个控制点(x1,y1),日常如下图所示:

路径<path>

美高梅开户网址 19

直线指令:

假若是接连的绘图曲线,同样可以动用简化版本T。同样的,只有T前边是Q或者T指令的时候,前面的T指令的控制点会默许设置为眼前的曲线的控制点的映射点,体会一下:

M = moveto

代码如下:

L = lineto

<svg width=”190px” height=”160px”>
<path d=”M10 80 Q 52.5 10, 95 80 T 180 80″ stroke=”black”
fill=”transparent”/>
</svg>

H = horizontal lineto

这几个HTML片段绘制如下图形:

V = vertical lineto

美高梅开户网址 20

Z = closepath

 
一如既往的,假如T指令前面不是Q或者T指令,则觉得无控制点,画出来的是直线。

注脚:以上所有命令均同意小写字母。大写表示相对定位,小写表示相对稳定。

对峙坐标绘制指令 与绝对坐标绘制指令的字母是千篇一律的,只然而全部是小写表示。那组命令的参数中涉嫌坐标的参数代表的是周旋坐标,意思就是参数代表的是从当前点到对象点的偏移量,正数就表示向轴正向偏移,负数代表向反向偏移。但是对Z指令来说,大小写没有分别。

<svg>

此地要小心,纯属坐标指令与相对坐标指令是可以勾兑使用的。有时混合使用可以拉动更灵敏的画法。

<path d=”M250 150 L150 350 L350 350 Z” />

SVG path绘制注意事项: 制图带孔的图形时要留心:外层边的绘图需假若逆时针顺序的,里面的洞的边的顺序必须是顺时针的。只有那样绘制的图纸填充效果才会不错。

</svg>

实用参考:
脚本索引:
开发为主:
看好参考:
官方文档:

释疑:该路线始于于地点 250 150,到达地点 150 350,然后从那边开首到 350
350,最终在 250 150 关闭路径。

出于绘制路径的扑朔迷离,提出采纳 SVG 编辑器来创建复杂的图形。

svg的贝塞尔曲线

贝塞尔曲线指令:

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

C两遍贝塞尔曲线

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

S光滑一回贝塞尔曲线

S x2 y2, x y (or s dx2 dy2, dx dy)

Q二次贝塞尔曲线

Q x1 y1, x y (or q dx1 dy1, dx dy)

T光滑二次贝塞尔曲线

T x y (or t dx dy)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图