这些元素可以直接使用,元素来嵌入SVG图像

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

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

那些事例画了过多模样:符合规律的矩形,带圆角的矩形,圆形,正方形,直线,折线,多边形,还应该有路线。那么些都属于基本的图纸成分。就算绘制二个图纸有很四种措施,比方矩形能够用rect达成,也能够用path等达成,不过我们照旧应该尽可能有限帮助SVG的原委短小精悍,易于阅读。 

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

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

图片 1

C一遍贝塞尔曲线

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

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

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

图片 2 

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>

Q = quadratic Belzier curve

相对坐标绘制指令 与相对坐标绘制指令的字母是一样的,只可是全部都以小写表示。那组命令的参数中关系坐标的参数代表的是相对坐标,意思便是参数代表的是从当前点到指标点的偏移量,正数就表示向轴正向偏移,负数代表向反向偏移。可是对Z指令来讲,大小写未有区分。

图片 3 

三、SVG path 路径

SVG 的路径<path>成效卓殊刚劲,它不仅能创立基本造型,还是能够创设越来越多复杂的模样。<path>路径是由一些发令来支配的,每二个限令对应二个字母,并且区分轻重缓急写,大写首要代表相对定位,小写表示相对固定。<path> 通过品质 d 来定义路径, d 是一密密麻麻命令的聚合,重要有以下多少个指令:

图片 4

平常说来抢先四分之二形态,都足以透过指令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'

表明:points 属性定义多边形各种角的 x 和 y 坐标。

绘制指令分为相对坐标指令和相对坐标指令二种,那二种指令使用的假名是一律的,就是深浅写不等同,相对指令使用大写字母,坐标也是纯属坐标;相对指令使用相应的小写字母,点的坐标表示的都以偏移量。 

SVG提供了累累的为主造型,这么些因素得以直接使用,这点比canvas好多了。废话不说了,直接看例子,那一个最直白: svg width=200...

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

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

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

  下边包车型客车HTML画出上面包车型地铁图纸:

1.rect to path

平日来讲图所示,三个 rect 是由 4 个弧和 4 个线段构成;假若 rect 未有安装 rx 和 ry 则 rect 只是由 4 个线段构成。rect 转换为 path 只须要将 A ~ H 之间的弧和线段依次实现就能够。

图片 5

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;
}

H = horizontal lineto

一经是接连的绘图曲线,一样能够采纳简化版本T。一样的,唯有T前面是Q恐怕T指令的时候,前面包车型地铁T指令的主宰点会暗许设置为眼下的曲线的调整点的映射点,体会一下:

 

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

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

图片 6

 

闲聊 SVG 基本造型调换那多少个事

2017/01/20 · HTML5 · SVG

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

图片 7

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>

 

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

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

图片 8

移动画笔指令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>

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;
}

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

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

一、前言

方今研讨 SVG 压缩优化,开采SVG预定义的 rectcircleellipselinepolylinepolygon 四种基本造型可由此path路线调换完结,那样能够在早晚水准上压缩代码量。不仅仅如此,大家常用的 SVG Path 动画(路线动画),是以操作path中三个属性值stroke-dasharraystroke-dashoffset来落到实处,基本造型转变为path路径,有利于贯彻门路动画。

Z = closepath

代码如下:

 

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”

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

 
从图中得以观看椭圆旋转参数的不及变成绘制的半圆形方向不相同,当然这几个参数对正圆来讲未有影响。

  这段HTML展现的结果如下:

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;
}

直线指令:

运动画笔指令M,画直线指令:L,H,V,闭合指令Z都相比较轻便;下边重视看看绘制曲线的多少个指令。

 

二、SVG基本造型

SVG 提供了rectcircleellipselinepolylinepolygon八种基本造型用于图形绘制,那几个造型能够平昔用来绘制一些着力的形象,如矩形、椭圆等,而复杂图形的绘图则须求使用 path 路线来促成。

图片 9

<head>

多边形 - polygon元素 本条元素正是比polyline成分多做一步,把最终二个点和第三个点连起来,产生闭合图形。参数是同等的。
points:一多种的用空格,逗号,换行符等分隔开分离的点。每种点必需有2个数字:x值和y值。所以下边3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。

摘自  沙场秋点兵  

2.circle/ellipse to path

圆可视为是一种特其他椭圆,即 rx 与 ry 相等的扁圆形,所以能够放在一同研讨。 椭圆能够看作A点到C做180度顺时针画弧、C点到A做180度顺时针画弧就可以。

图片 10

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;
}

background: url(‘) no-repeat;

本条HTML片段绘制了上面包车型大巴图形:
图片 11

 

兼容性

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

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

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

SVG path绘制注意事项: 绘图带孔的图样时要留神:外层边的绘图需要是逆时针顺序的,里面包车型客车洞的边的逐一必需是顺时针的。独有那样绘制的图形填充效果才会精确。

同样的,假如T指令前面不是Q也许T指令,则感觉无调节点,画出来的是直线。

最首要的帮助和益处便是能减弱页面的加载时间,优化支出流程,以致保险页面中图纸成分的一致性。

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

  那些HTML绘制了上面包车型大巴几幅图:

本文由必威发布于必威-前端,转载请注明出处:这些元素可以直接使用,元素来嵌入SVG图像

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。