图表绘制,介绍及接纳

by admin on 2019年4月5日

闲聊 SVG 基本造型转换这个事

2017/01/20 · HTML5 ·
SVG

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

必发88 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 路径来落到实处。

必发88 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要素用于绘制矩形、圆角矩形,含有四个大旨天性用于控制矩形的形象以及坐标,具体如下:

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 有2个值为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>

壹.利用<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要素用于绘制圆形,含有2个基本天性用于控制圆形的坐标以及半径,具体如下:

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要素更通用的花样,含有5个宗旨性子用于控制椭圆的形象以及坐标,具体如下:

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图像作为背景图像嵌入

必发88 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
点集数列,各个数字用空白、逗号、终止命令符可能换行符分隔绝,每一个点必须包罗三个数字,3个是x坐标,3个是y坐标
如0 0, 1 一, 二 二”

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

叁.运用svg成分,通过代码将SVG图像嵌入到HTML代码中

其1例子画了不少样子:平常的矩形,带圆角的矩形,圆形,正方形,直线,折线,多边形,还有路径。这个都属于宗旨的图形成分。尽管绘制三个图纸有很各个方法,比如矩形可以用rect实现,也得以用path等落到实处,然则我们依旧应该尽心尽力保证SVG的始末短小精悍,易于阅读。 

必发88 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的不二法门在终极1个点处自动再次回到第一个点。须求注意的是,矩形也是一种多边形,假设急需越来越多灵活性的话,你也得以用多边形创制2个矩形。

points
点集数列,每种数字用空白、逗号、终止命令符或许换行符分隔绝,各个点必须含有1个数字,三个是x坐标,一个是y坐标
如0 0, 一 一, 2 二, 路径绘制完关闭图形”

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

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

下边是每种造型的采用表明(那里只介绍控制图形形状和职位的大旨属性,填充等属性放到前边计算)。

本条例子画了好各个子:不荒谬的矩形,带圆角的矩形,圆形,正方形,直线,折线,多边形,还有路径。那几个都属于主旨的图片成分。即便绘制贰个图纸有很各类形式,比如矩形能够用rect完毕,也能够用path等实现,不过大家仍然应当尽大概保障SVG的始末短小精悍,易于阅读。
  上面是各样造型的利用表达(那里只介绍控制图形形状和职责的主干品质,填充等质量放到前面总括)。
矩形 – rect元素
  这么些成分有伍个控制地方和形状的属性,分别是:
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元素
图表绘制,介绍及接纳。  折线首即便要定义每条线段的端点即可,所以只供给1个点的聚合作为参数:
points:一三种的用空格,逗号,换行符等分隔开分离的点。种种点必须有3个数字:x值和y值。所以下边3个点
(0,0), (一,1)和(二,二)能够写成:”0 0, 1 一, 贰 二”。
 
多边形 – polygon元素
  这些因素便是比polyline成分多做一步,把最终多少个点和第一个点连起来,形成密闭图形。参数是同样的。
points:1体系的用空格,逗号,换行符等分隔离的点。各类点必须有贰个数字:x值和y值。所以下面三个点
(0,0), (1,1)和(贰,贰)能够写成:”0 0, 一 一, 二 贰”。
 
路径 – path元素
  这一个是最通用,最强力的成分了;使用那些成分你能够达成别的其他的图片,不仅包蕴地点这几个骨干造型,也得以兑现像贝塞尔曲线那样的纷纭形态;别的,使用path可以兑现平滑的连片线段,固然也得以利用polyline来达成那种成效,不过急需提供的点多多,而且放大了听从也不佳。那些因素控制地方和形状的唯有一个参数:
d:壹多级绘制指令和制图参数(点)组合成。
  绘制指令分为相对坐标指令和相对坐标指令两种,那二种指令使用的假名是均等的,就是大大小小写不一样,相对指令使用大写字母,坐标也是纯属坐标;相对指令使用相应的小写字母,点的坐标表示的都以偏移量。
相对坐标绘制指令
  那组命令的参数代表的是相对坐标。假使当前画笔所在的地点为(x0,y0),则上边包车型客车相对坐标指令代表的意思如下所示:

三、SVG path 路径

SVG
的路径<path>功用非常有力,它不只好创设基本造型,仍是能够创制更多复杂的样子。<path>路线是由一些发令来决定的,每一种限令对应一个字母,并且区分轻重缓急写,大写首要代表相对定位,小写表示相对稳定。<path>
通过质量 d 来定义路径, d 是1密密麻麻命令的会晤,首要有以下多少个指令:

必发88 5

见怪不怪大多数模样,都能够透过指令M(m)L(l)H(h)V(v)A(a)来贯彻,注意尤其要差距轻重缓急写,相对与相对坐标景况,转换时推荐使用相对路径可减掉代码量,例如:

// 以下五个等价 d=’M 10 10 20 20′ // (十, 拾) (20 20) 都是纯属坐标 d=’M
十 10 L 20 20′   // 以下多个等价 d=’m 十 十 20 20′ // (10, 十) 相对坐标,
(20 20) 相对坐标 d=’M 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元素 那么些因素有多少个控制地点和样子的属性,分别是:
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 个弧和 四 个线段构成;假若 rect 没有安装
rx 和 ry 则 rect 只是由 四 个线段构成。rect 转换为 path 只需求将 A
~ H 之间的弧和线段依次实现即可。

必发88 6

JavaScript

function rect2path(x, y, width, height, rx, ry) { /* * rx 和 ry
的规则是: * 1. 假如中间3个安装为 0 则圆角不生效 * 二.
万一有三个尚未安装则取值为另一个 */ rx = rx || ry || 0; ry = ry || rx
|| 0;   //非数值单位测算,如当宽度像百分百则移除 if (isNaN(x – y + width –
height + rx – ry)) return;   rx = rx > width / 二 ? width / 2 : rx; ry
= ry > height / 2 ? height / 贰 : 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 一 ‘ + rx + ‘ ‘ + (-ry) + ‘h’ +
    (width – rx – rx) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 一 ‘ + rx + ‘ ‘ + ry +
    ‘v’ + (height – ry -ry) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 壹 ‘ + (-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度顺时针画弧即可。

必发88 7

JavaScript

function ellipse二path(cx, cy, rx, ry) {
//非数值单位测算,如当宽度像百分之百则移除 if (isNaN(cx – cy + rx – ry))
return;   var path = ‘M’ + (cx-rx) + ‘ ‘ + cy + ‘a’ + rx + ‘ ‘ + ry + ‘
0 壹 0 ‘ + 二*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
  用圆弧连接三个点比较复杂,情形也很多,所以那几个命令有八个参数,分别控制曲线的的各种属性。上边解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation
是此段弧所在的x轴与品位方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为一 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为一意味从源点到巅峰弧线绕中央顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
  前多个参数和后多个参数就不多说了,非常粗大略;上边就说说中间的1个参数:
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(x一, y一, x2, y二) {
//非数值单位总括,如当宽度像百分百则移除 if (isNaN(x一 – y1 + x贰 – y二))
return;   x一 = x壹 || 0; y一 = y1 || 0; x2 = x2 || 0; y二 = y二 || 0;   var
path = ‘M’ + x壹 + ‘ ‘+ y一 + ‘L’ + x二 + ‘ ‘ + y二; 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,二).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元素 折线首就算要定义每条线段的端点即可,所以只须求多个点的相会作为参数:

 

5、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 收藏
评论

必发88 8

svg sprites类似于css sprites,将种种svg合并在同步。

points:一名目繁多的用空格,逗号,换行符等分隔断的点。每一种点必须有一个数字:x值和y值。所以下边2个点
(0,0), (1,壹)和(二,2)能够写成:”0 0, 壹 一, 2 贰”。

必发88 9 

最主要的优点就是能压缩页面的加载时间,优化支出流程,以及有限支撑页面中图纸成分的壹致性。

多边形 – polygon元素 必发88,其壹成分正是比polyline元素多做一步,把最终三个点和率先个点连起来,形成闭合图形。参数是相同的。
points:一体系的用空格,逗号,换行符等分隔开分离的点。各种点必须有二个数字:x值和y值。所以上边三个点
(0,0), (一,1)和(二,2)能够写成:”0 0, 1 一, 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),则上面包车型客车相对化坐标指令代表的含义如下所示:

必发88 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都比较简单;下边重点看看绘制曲线的多少个指令。

绘图1次贝塞尔曲线指令:C  x一 y一, x二 y二, x y          
  3遍贝塞尔曲线有三个控制点,正是(x壹,y一)和(x二,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 用圆弧连接二个点相比复杂,境况也很多,所以那么些命令有多少个参数,分别控制曲线的的各种属性。下边解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation
是此段弧所在的x轴与水准方向的夹角,即x轴的逆时针转动角度,负数代表顺时针转动的角度。
large-arc-flag 为一 代表大角度弧线,0 代表小角度弧线。
sweep-flag 为1表示从起源到极限弧线绕中央顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
前三个参数和后八个参数就不多说了,很简短;上边就说说中间的一个参数:
x-axis-rotation代表旋转的角度,体会上面例子中圆弧的比不上:

  这几个HTML片段绘制了下边包车型地铁图片:

</svg>

代码如下:

  
   必发88 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画出下边包车型大巴图片:

从上边大家能够观察,控制点控制了曲线的弧度。
 
尤其版本的3次贝塞尔曲线:S  x二 y二, x y
  很多时候,为了绘制平滑的曲线,要求反复总是绘制曲线。那年,为了平滑过渡,平日第3个曲线的控制点是率先个曲线控制点在曲线其余一方面包车型大巴映射点。这年能够选拔那一个简化版本。那里要小心的是,假设S指令前面未有此外的S指令或C指令,这年会以为七个控制点是同1的,退化成二遍贝塞尔曲线的规范;如若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形状

必发88 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控制了圆弧的深浅和走向,体会上面例子中圆弧的两样:

必发88 13 

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

代码如下:

地点的S指令唯有第1个控制点,第三个控制点采用了前方的曲线指令的第一个控制点的二个映射点。

特性: 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>

制图2次贝塞尔曲线指令:Q  x壹 y一, x y , T x y 
(特殊版本的三次贝塞尔曲线)
  一回贝塞尔曲线唯有四个控制点(x1,y壹),平时如下图所示:

stroke 属性定义图形边框的颜色

其一HTML绘制了上边包车型地铁几幅图:

 

stroke-width 属性定义形状边框的大幅

必发88 14

必发88 15 

圆形 <circle>

 
从上面能够看来,那些参数其实是绝无仅有分明壹段圆弧需求的参数。那里也看到,SVG中的圆弧比canvas中的复杂一些。

就算是接2连3的绘图曲线,同样能够利用简化版本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 y一, x2 y二, x y          

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

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

贰回贝塞尔曲线有多少个控制点,就是(x壹,y1)和(x二,y贰),最前边(x,y)代表曲线的极端。体会上边的例子:

 

椭圆<ellipse>

代码如下:

必发88 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片段绘制了上边包车型大巴图形:
必发88 17

平等的,假如T指令后面不是Q恐怕T指令,则认为无控制点,画出来的是直线。

线<line>

 从上边大家得以看出,控制点控制了曲线的弧度。

争执坐标绘制指令
  与相对坐标绘制指令的字母是同1的,只可是全体是小写表示。那组命令的参数中涉及坐标的参数代表的是相对坐标,意思正是参数代表的是从当前点到对象点的偏移量,正数就代表向轴正向偏移,负数代表向反向偏移。但是对Z指令来说,大小写未有分别。

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

非凡版本的贰回贝塞尔曲线:S  x二 y2, x y

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

分解:(x一,y一)为线条的始发坐标;(x二,y二)为线条的甘休坐标。

许多时候,为了绘制平滑的曲线,须要反复接连绘制曲线。那一年,为了平滑对接,通常第一个曲线的控制点是率先个曲线控制点在曲线此外1方面包车型地铁映射点。那个时候能够使用那个简化版本。那里要留意的是,如若S指令前边未有别的的S指令或C指令,那个时候会觉得五个控制点是均等的,退化成一次贝塞尔曲线的规范;假使S指令是用在别的3个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>

必发88 18

SVG提供了成千上万的骨干造型,这个因素得以直接使用,这点比canvas好多了。废话不说了,间接看例子,那一个最直接:
svg width=200…

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

地方的S指令唯有第2个控制点,第三个控制点接纳了前面包车型大巴曲线指令的第壹个控制点的3个映射点。

诠释:points 属性定义多边形各类角的 x 和 y 坐标。

绘图贰次贝塞尔曲线指令:Q  x1 y一, x y , T x
y  (特殊版本的二回贝塞尔曲线)
2遍贝塞尔曲线唯有3个控制点(x壹,y壹),经常如下图所示:

路径<path>

必发88 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

必发88 20

Z = closepath

 
平等的,假诺T指令后边不是Q或然T指令,则觉得无控制点,画出来的是直线。

诠释:以上全部命令均同意小写字母。大写表示相对定位,小写表示相对稳定。

相对坐标绘制指令 与相对坐标绘制指令的假名是1致的,只可是全部是小写表示。那组命令的参数中提到坐标的参数代表的是对立坐标,意思正是参数代表的是从当前点到对象点的偏移量,正数就象征向轴正向偏移,负数代表向反向偏移。可是对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地图