【亚洲必赢官网】图片绘制,基本造型转换这几个事

闲聊 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地图