www.qjdy.com-奇迹赌场 > 佳美特设计 > 发现SVG预定义的

原标题:发现SVG预定义的

浏览次数:138 时间:2019-11-29

闲谈 SVG 基本造型转换那多少个事

2017/01/20 · HTML5 · SVG

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

图片 1

一、前言

近期商讨 SVG 压缩优化,开掘SVG预约义的 rectcircleellipselinepolylinepolygon 三种为主造型可因此path路线转换完毕,那样能够在必然水平上压缩代码量。不仅仅如此,咱们常用的 SVG Path 动漫(路线动漫卡塔尔国,是以操作path中五个属性值stroke-dasharraystroke-dashoffset来得以完毕,基本造型调换为path路线,有利于落实路线动漫。

二、SVG基本造型

SVG 提供了rectcircleellipselinepolylinepolygon种种为主造型用于图形绘制,那么些形象能够直接用来绘制一些骨干的形制,如矩形、椭圆等,而复杂图形的绘图则要求动用 path 路线来落实。

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

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

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

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

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”

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 path 路径

SVG 的路径<path>作用非常有力,它既能创造基本造型,还可以创制越来越多复杂的形态。<path>路径是由局地指令来调控的,每八个指令对应叁个假名,並且区分朗朗上口写,大写首要代表绝对定位,小写表示相对固化。<path> 通过品质 d 来定义路线, d 是生龙活虎多元命令的成团,首要有以下多少个指令:

图片 3

日常说来超越45%样子,都得以通过指令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 基本造型路线转变原理

1.rect to path

如下图所示,八个 rect 是由 4 个弧和 4 个线段构成;假诺 rect 没有安装 rx 和 ry 则 rect 只是由 4 个线段构成。rect 转换为 path 只供给将 A ~ H 之间的弧和线段依次完毕就可以。

图片 4

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

2.circle/ellipse to path

圆可视为是意气风发种特有的扁圆形,即 rx 与 ry 相等的椭圆,所以能够投身一同座谈。 椭圆能够充任A点到C做180度顺时针画弧、C点到A做180度顺时针画弧就可以。

图片 5

JavaScript

function ellipse2path(cx, cy, rx, ry卡塔尔国 { //非数值单位总结,如当宽度像百分百则移除 if (isNaN(cx - cy rx - ry卡塔尔卡塔尔(英语:State of Qatar)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;
}

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

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(' '卡塔尔(英语:State of Qatar); 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;
}

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

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:发现SVG预定义的

关键词: mg4355手机版 HTML5

上一篇:禁止转载

下一篇:没有了