通过代码将SVG图像嵌入到HTML代码中,基本形状

3.line to path

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

JavaScript

function line2path(x1, y1, x2, y2) { //非数值单位测算,如当宽度像百分之百则移除 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;
}

矩形 <rect>

 
一样的,若是T指令前边不是Q或然T指令,则以为无调整点,画出来的是直线。

相对坐标绘制指令
  与相对坐标绘制指令的假名是一律的,只不过全都以小写表示。那组命令的参数中关系坐标的参数代表的是相对坐标,意思正是参数代表的是从当前点到目的点的偏移量,正数就意味着向轴正向偏移,负数代表向反向偏移。可是对Z指令来讲,大小写没有区分。

  <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"/>

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

<head>

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

 

 

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”

</head>

图片 1

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

 

1.rect to path

日常来说图所示,二个 rect 是由 4 个弧和 4 个线段构成;假若 rect 未有安装 rx 和 ry 则 rect 只是由 4 个线段构成。rect 转换为 path 只要求将 A ~ H 之间的弧和线段依次实现就可以。

图片 2

JavaScript

function rect2path(x, y, width, height, rx, ry) { /* * rx 和 ry 的法则是: * 1. 假如中间多少个安装为 0 则圆角不生效 * 2. 只要有三个没有设置则取值为另多少个 */ rx = rx || ry || 0; ry = ry || rx || 0;   //非数值单位测算,如当宽度像百分百则移除 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;
}

<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调控了圆弧的尺寸和走向,体会上边例子中圆弧的例外:
<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 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>

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位置

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形, 首要优势在于可缩放的同一时间不会潜移暗化图片的身分。

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

 

  从地点能够观望,那多少个参数其实是独一分明一段圆弧须要的参数。这里也看到,SVG中的圆弧比canvas中的复杂一些。

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

SVG形状

折线 - polyline元素 折线首即使要定义每条线段的端点就可以,所以只供给一个点的聚焦作为参数:

  这段HTML显示的结果如下:

路径 - path元素   这几个是最通用,最强力的要素了;使用那些成分你能够兑现别的其余的图片,不仅仅包含地点那一个骨干造型,也得以兑现像贝塞尔曲线那样的纷纭形态;别的,使用path能够兑现平滑的联网线段,尽管也能够动用polyline来落到实处这种效率,但是须要提供的点多多,并且放大了意义也不佳。那几个因素调节地方和形状的唯有四个参数:
d:一多种绘制指令和制图参数(点)组合成。

闲谈 SVG 基本造型转变那么些事

2017/01/20 · HTML5 · SVG

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

图片 3

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

实用参谋:
脚本索引:
付出为主:
火爆参考:
法定文书档案:

 

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

2.circle/ellipse to path

圆可视为是一种独特的扁圆形,即 rx 与 ry 相等的椭圆,所以可以投身一同探究。 椭圆可以看做A点到C做180度顺时针画弧、C点到A做180度顺时针画弧就能够。

图片 4

JavaScript

function ellipse2path(cx, cy, rx, ry) { //非数值单位测算,如当宽度像百分之百则移除 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;
}

background: url(‘) no-repeat;

看不尽时候,为了绘制平滑的曲线,供给频仍接连绘制曲线。这一年,为了平滑过渡,平常第3个曲线的调节点是第二个曲线调控点在曲线别的一边的映射点。那一年能够应用那几个简化版本。这里要留神的是,要是S指令前边未有任何的S指令或C指令,那年会以为五个调控点是一样的,退化成一遍贝塞尔曲线的样板;固然S指令是用在别的一个S指令可能C指令后边,这年背后那么些S指令的首先个调节点会暗中认可设置为眼下的这么些曲线的第贰个调控点的二个映射点,体会一下:

图片 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 收藏 评论

图片 6

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

路径 - path元素 这么些是最通用,最强力的成分了;使用那个成分你能够兑现别的其余的图片,不只有包罗地点那一个基本造型,也足以兑现像贝塞尔曲线那样的复杂形态;其余,使用path能够兑现平滑的联网线段,就算也足以利用polyline来落到实处这种效果,然而急需提供的点众多,並且放大了效劳也倒霉。这几个因素调控地点和形制的唯有一个参数:
d:一多级绘制指令和制图参数(点)组合成。

 

 图片 7

一、前言

目前斟酌 SVG 压缩优化,开采SVG预订义的 rectcircleellipselinepolylinepolygon 七种基本造型可透过path路线转变完成,那样能够在自然水准上压缩代码量。不独有如此,大家常用的 SVG Path 动画(路线动画),是以操作path中七个属性值stroke-dasharraystroke-dashoffset来兑现,基本造型转变为path路线,有帮忙实现路子动画。

 

多边形 - polygon元素 其一元素正是比polyline成分多做一步,把最后四个点和率先个点连起来,产生闭合图形。参数是一模一样的。
points:一体系的用空格,逗号,换行符等分隔绝的点。每一种点必得有2个数字:x值和y值。所以上面3个点 (0,0), (1,1)和(2,2)能够写成:"0 0, 1 1, 2 2"。

图片 8 

  绘制指令分为相对坐标指令和周旋坐标指令三种,这两种指令使用的字母是相同的,便是高低写不雷同,相对指令使用大写字母,坐标也是相对坐标;相对指令使用相应的小写字母,点的坐标表示的都以偏移量。 

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>

svg sprites类似于css sprites,将种种svg合併在一同。

代码如下:

  上面包车型大巴HTML画出上边包车型客车图样:

圆 - circle元素   那一个成分的习性比比较粗略,主就算概念圆心和半径:
r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。

二、SVG基本造型

SVG 提供了rectcircleellipselinepolylinepolygon两种为主造型用于图形绘制,那么些形象能够间接用来绘制一些主导的造型,如矩形、椭圆等,而复杂图形的绘图则须求运用 path 路径来贯彻。

图片 9

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

points:一多种的用空格,逗号,换行符等分隔断的点。每种点必需有2个数字:x值和y值。所以上面3个点 (0,0), (1,1)和(2,2)能够写成:"0 0, 1 1, 2 2"。

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

椭圆 - ellipse元素   这几个是更为通用的圈子成分,你能够分级调整半长轴和半短轴的长度,来落实不一致的椭圆,很轻便想到,当五个半轴相等时,便是正圆形了。
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。

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, 路径绘制完闭合图形”

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

绘制圆弧指令: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片段绘制了上面包车型地铁图形:

 图片 10

四、SVG 基本造型路线调换原理

贝塞尔曲线指令:

SVG path绘制注意事项: 绘制带孔的图片时要小心:外层边的绘图需假如逆时针顺序的,里面包车型大巴洞的边的依次必需是顺时针的。只有这么绘制的图样填充效果才会不错。

图片 11 

 

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>

<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提供了大多的大旨造型,那一个要素得以一贯利用,那一点比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"/>

优良版本的三回贝塞尔曲线:S  x2 y2, x y

三、SVG path 路径

SVG 的路径<path>职能格外庞大,它不仅能成立基本造型,还是能创立更加多复杂的形态。<path>门路是由局地发令来支配的,每三个限令对应二个假名,並且区分轻重缓急写,大写重要代表相对定位,小写表示相对固化。<path> 通过质量 d 来定义路径, d 是一多种命令的聚焦,重要有以下多少个指令:

图片 12

经常超过57%样子,都足以透过指令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'

推行中大家能够把整块的svg放在head底部, 因而得以在一处地方更新svg就可以,并非让svg的代码块散落在文书档案的一一地点。

图片 13

  <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"/>

     

本文由必威发布于必威-前端,转载请注明出处:通过代码将SVG图像嵌入到HTML代码中,基本形状

相关阅读