图像入门教程,Path路线在网页开垦的效应

By admin in 4858美高梅 on 2019年5月3日

SVG Path路线在网页开垦的魔法

2018/06/27 · HTML5 ·
SVG

原著出处:
会编制程序的银猪   

SVG是矢量图形表示,它的1个强有力之处在于path标签能够表示大4的矢量形状,利用好这几个path可以做出过多价值观html/css做不出来的效果。上面举多少个例证。

SVG 图像入门教程

2018/08/07 · HTML5 ·
SVG

初稿出处: 阮一峰   

点评: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″/>

1. 做路线动画

其一自个儿在《SVG导航下划线光标跟随效果》文后补充介绍了这几个实现,最终的功力是这般的:

4858美高梅 1

福衢寿车代码如下:

4858美高梅 2

选择animateMotion结合path做的卡通片,具体表达可知上文。

一、概述

SVG 是1种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector
Graphics)。别的图像格式都是依据像素管理的,SVG
则是属于对图像的形态描述,所以它实质上是文件文件,体量不大,且不论放大多少倍都不会失真。

4858美高梅 3

SVG 文件能够直接插入网页,成为 DOM 的1部分,然后用 JavaScript 和 CSS
实行操作。

<!DOCTYPE html> <html> <head></head>
<body> <svg id=”mysvg” xmlns=””
viewBox=”0 0 800 600″ preserveAspectRatio=”xMidYMid meet” >
<circle id=”mycircle” cx=”400″ cy=”300″ r=”50″ /> <svg>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>

下边是 SVG 代码直接插入网页的事例。

SVG
代码也足以写在一个单独文件中,然后用<img><object><embed><iframe>等标签插入网页。

<img src=”circle.svg”> <object id=”object” data=”circle.svg”
type=”image/svg+xml”></object> <embed id=”embed”
src=”icon.svg” type=”image/svg+xml”> <iframe id=”iframe”
src=”icon.svg”></iframe>

1
2
3
4
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS 也得以运用 SVG 文件。

CSS

.logo { background: url(icon.svg); }

1
2
3
.logo {
  background: url(icon.svg);
}

SVG 文件还是能转为 BASE6四 编码,然后作为 Data U路虎极光I 写入网页。

<img src=”data:image/svg+xml;base64,[data]”>

1
<img src="data:image/svg+xml;base64,[data]">

宗旨造型 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″/>

二. 兑现非平常形状的点击

正如图所示,必要贯彻点到哪些洲就进入哪个洲的功用,比如点到澳洲就进来北美洲:

4858美高梅 4

咱俩得以用div定叁个框盖在欧洲的上边,不过用div的话只好是平整的4方形,不可能落到实处点到北美洲大6的时候才进入,不过大6的大约又是畸形的,所以用古板html是无法化解这一个难点的。不过用SVG的path能够化解那些主题材料,方法一是监听path的点击事件就能够,如下图所示:

4858美高梅 5

因为这几个大致能够跟UI要到,他们一般都以用AI/PS等矢量软件画出来的,让她们导1个SVG给您就好了。

措施二是足以调SVG的isPointInFill那么些API剖断点击的点是或不是在Path的fill区域内部,那个也足以兑现,不过相对于艺术1的话相比较麻烦,因为还要求把鼠标的地方转变为svg视图的地方。

二、语法

代码如下:

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

三. 沿着马路线拖拽的并行

在第②点沿着马路径的卡通是机动的长河,有未有点子让用户本身拖拽过去吧,完毕如下效果:

4858美高梅 6

那种的现象有音量调节等供给有百分比调节的。能够先用2个SVG的在线工具画出一个那样的图纸:

4858美高梅 7

就可以获得SVG的代码:

<svg class=”volumn-controller” width=”580″ height=”400″
xmlns=”; <path class=”volumn-path”
stroke=”#000″ d=”m100,247c93,-128 284,-129 388,6″ opacity=”0.5″
stroke-width=”1″ fill=”#fff”/> <circle class=”drag-button” r=”12″
cy=”247″ cx=”100″ stroke-width=”1″ stroke=”#000″ fill=”#fff”/>
</g> </svg>

1
2
3
4
5
<svg class="volumn-controller" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
    <path class="volumn-path" stroke="#000" d="m100,247c93,-128 284,-129 388,6" opacity="0.5" stroke-width="1" fill="#fff"/>
    <circle class="drag-button" r="12" cy="247" cx="100" stroke-width="1" stroke="#000" fill="#fff"/>
</g>
</svg>

此处相比关键的是path标签里的d属性,d是data的缩写,定义那个门路的造型,它个中能够用成千上万品质决定形状的变型,如下图所示:

4858美高梅 8

为了贯彻那些互动,必要动态地退换circle的圆心地方(cx,
cy)到路线上相应的地点。SVG未有直接提供相关的API,不过它提供了2个方可直接利用的API叫getPointAtLength,传递一个长度参数,如下代码所示:

let volumnPath = document.querySelector(‘.volumn-path’); //
输出path在长短为100的岗位的点坐标
console.log(volumnPath.getPointAtLength(100)); // 输出当前path的总司长度
console.log(volumnPath.getTotalLength());

1
2
3
4
5
let volumnPath = document.querySelector(‘.volumn-path’);
// 输出path在长度为100的位置的点坐标
console.log(volumnPath.getPointAtLength(100));
// 输出当前path的总长度
console.log(volumnPath.getTotalLength());

调整台出口:

4858美高梅 9

把circle的cx/cy改成地点的x/y坐标,圆圈就能够跑到对应的岗位去了:

4858美高梅 10

此间的难点在于这一个API传递的length参数是相对于曲线长度的,然则鼠标移动的职分是线性的,无法间接明白当前鼠标在曲线上距离开端地点某些。

故此供给算一下,在那个情况之中大家能够取鼠标的x坐标在曲线上相应的岗位就足以了,如下图表示:

4858美高梅 11

到这里就有思路了,能够把那条路线上每隔一个像素长度就算一下它的坐标在什么地方,然后存在2个数组里面。由于鼠标移动的时候x坐标是清楚的,就能够查一下在这几个数组里面相应x坐标的y坐标是稍稍,就能够获得想要的圆心地方了。

为此先统计一下,保存到多个数组:

let $volumnController = document.querySelector(‘.volumn-controller’),
$volumnPath = $volumnController.querySelector(‘.volumn-path’); //
获得当前路径的总省长度 let pathTotalLength = $volumnPath.getTotalLength()
>> 0; let points = []; // 初步地点为长度为0的位置 let startX =
Math.round($volumnPath.getPointAtLength(0).x); //
每隔一个像素距离就保存一下路子上点的坐标 for (let i = 0; i <
pathTotalLength; i++) { let p = $volumnPath.getPointAtLength(i); //
保存的坐标用肆舍5入,能够平衡固有误差 points[Math.round(p.x) – startX] =
Math.round(p.y); }

1
2
3
4
5
6
7
8
9
10
11
12
13
let $volumnController = document.querySelector(‘.volumn-controller’),
    $volumnPath = $volumnController.querySelector(‘.volumn-path’);
// 得到当前路径的总长度
let pathTotalLength = $volumnPath.getTotalLength() >> 0;
let points = [];
// 起始位置为长度为0的位置
let startX = Math.round($volumnPath.getPointAtLength(0).x);
// 每隔一个像素距离就保存一下路径上点的坐标
for (let i = 0; i < pathTotalLength; i++) {
    let p = $volumnPath.getPointAtLength(i);
    // 保存的坐标用四舍五入,可以平衡误差
    points[Math.round(p.x) – startX] = Math.round(p.y);
}

此间用贰个p0ints数组来保存,它的索引index就为x坐标,值为y坐标。在那个事例里面,总秘书长度为451.伍px,获得的points数COO度为38八.
您能够隔0.伍px长度就保存三个坐标,但是在这些例子里面1px就够了。

接下来监听鼠标事件,得到x坐标,查询y坐标,动态地改造circle的圆心地点,如下代码所示:

let $dragButton = $volumnController.querySelector(‘.drag-button’), //
获得起首地点相对当前视窗的职位,也就是jQuery.fn.offset dragButtonPos =
$dragButton.getBoundingClientRect(); function movePoint (event) { //
当前鼠标的岗位减去圆心开首地点就拿走移位偏差,1二是半径值,这里先直接写死
let diffX = event.clientX – Math.round(dragButtonPos.left + 1二); //
须求做个境界剖断 diffX < 0 && (diffX = 0); diffX >= points.length
&& (diffX = points.length – 一); //
startX是在地方的代码获得的长度为0的职责 $dragButton.setAttribute(‘cx’,
diffX + startX); // 使用points数组获得y坐标
$dragButton.setAttribute(‘cy’, points[diffX]); }
$dragButton.addEventListener(‘mousedown’, function (event) {
document.addEventListener(‘mousemove’, movePoint); });
document.addEventListener(‘mouseup’, function () {
document.removeEventListener(‘mousemove’, movePoint); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let $dragButton = $volumnController.querySelector(‘.drag-button’),
    // 得到起始位置相对当前视窗的位置,相当于jQuery.fn.offset
    dragButtonPos = $dragButton.getBoundingClientRect();
function movePoint (event) {
    // 当前鼠标的位置减去圆心起始位置就得到移位偏差,12是半径值,这里先直接写死
    let diffX = event.clientX – Math.round(dragButtonPos.left + 12);
    // 需要做个边界判断
    diffX < 0 && (diffX = 0);
    diffX >= points.length && (diffX = points.length – 1);
    // startX是在上面的代码得到的长度为0的位置
    $dragButton.setAttribute(‘cx’, diffX + startX);
    // 使用points数组得到y坐标
    $dragButton.setAttribute(‘cy’, points[diffX]);
}
$dragButton.addEventListener(‘mousedown’, function (event) {
    document.addEventListener(‘mousemove’, movePoint);
});
document.addEventListener(‘mouseup’, function () {
    document.removeEventListener(‘mousemove’, movePoint);
});

本条达成的代码也是相比较不难,供给注意的地点是开首地方的抉择,这里有八个坐标系,3个是相持页面包车型地铁视窗的,它的原点(0,
0)坐标点是眼下页面可视区域(client)的左上角,第3个坐标系是SVG的坐标系,它的原点(0,
0)地方是SVG画布的左上角,如下图所示:

4858美高梅 12

鼠标的任务是周旋于视图client的,所以须要获得圆圈在client的职位,能够经过原生的getBoundingClient获取,然后用鼠标的clientX减掉圆圈的clientX就拿走正确的运动偏差diff了,这么些diff值加上圆圏的在svg坐标的胚胎地方就会赢得svg里的x坐标了,然后去查一下points数组就能够获取y坐标,然后去设置circle的cx/cy值。

以此的得以落成已经算是那1个粗略的,差不离30行代码。须要注意的是如果svg缩放了,那么坐标也要对应比例地改一下。所以最佳是并非缩放,一:一显示就轻易多了。

尽管要展现具体的音量值呢?那些也好办,只需求在第贰步保存点坐标的时候把在路线上的长度也保留下去就好了,最终效果如下:

4858美高梅 13

一个壹体化的demo:svg-path-drag.html

假设路线相比复杂怎么做呢,二个x坐标大概会对应四个点,如下图所示:

4858美高梅 14

以此也是有点子的,计算的法子类似,也是内需把门路上具备每隔一px的点坐标都收取来,然后总计一下鼠标的地点距离哪个点的坐标最相仿,然后就取那一个点就好了。当然在认清哪些点最优时,算法需求优化,不能直接三个for循环,具体可知那个codepen。

2.1<svg>标签

SVG 代码都献身顶层标签<svg>“之中。上边是贰个例子。

<svg width=”100%” height=”100%”> <circle id=”mycircle” cx=”50″
cy=”50″ r=”50″ /> </svg>

1
2
3
<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<svg>的width属性和height性能,钦点了 SVG 图像在 HTML
成分中所攻陷的增长幅度和冲天。除了绝对单位,也得以运用相对单位(单位:像素)。借使不钦赐那五个天性,SVG
图像私下认可大小是300像素(宽) x 150像素(高)。

一经只想突显 SVG 图像的壹局地,将在钦定viewBox属性。

<svg width=”100″ height=”100″ viewBox=”50 50 50 50″> <circle
id=”mycircle” cx=”50″ cy=”50″ r=”50″ /> </svg>

1
2
3
<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

<viewBox>质量的值有八个数字,分别是左上角的横坐标和纵坐标、视口的增进率和高度。上边代码中,SVG
图像是十0像素宽 x
100像素高,viewBox质量钦定视口从(50, 50)以此点开始。所以,实际看来的是右下角的四分一圆。

小心,视口必须适配所在的空中。上边代码中,视口的高低是 50 x 50,由于 SVG
图像的大小是 十0 x 十0,所以视口会加大去适配 SVG
图像的大大小小,即加大了四倍。

即使不点名width属性和height属性,只指定viewBox属性,则一定于只给定
SVG 图像的长度宽度比。那时,SVG 图像的暗许大小将等于所在的 HTML 成分的大大小小。

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

四. 门路的变形动画

路径结合关键帧能够做出一些妙趣横生的效益,如这个codepen的示例:

4858美高梅 15

它的得以达成是hover的时候改造path的d值,然后做d的transition动画,如下代码:

<svg viewBox=”0 0 10 10″ class=”svg-1″> <path d=”M2,2 L8,8″
/> </svg> <style> .svg-1:hover path { d: path(“M8,2
L2,8”); } path { transition: d 0.5s linear; } </style>

1
2
3
4
5
6
7
8
9
10
11
<svg viewBox="0 0 10 10" class="svg-1">
  <path d="M2,2 L8,8" />
</svg>
<style>
.svg-1:hover path {
  d: path("M8,2 L2,8");
}
path {
    transition: d 0.5s linear;
}
</style>

这种变形过渡动画是有标准化的,就是它的路径数据格式是要壹致的,某个许个M/L/C属性都要保持①致,不然不可能做变形动画。

2.2 <circle>标签

<circle>标签代表圆形。

<svg width=”300″ height=”180″> <circle cx=”30″ cy=”50″ r=”25″
/> <circle cx=”90″ cy=”50″ r=”25″ class=”red” /> <circle
cx=”150″ cy=”50″ r=”25″ class=”fancy” /> </svg>

1
2
3
4
5
<svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>

地点的代码定义了五个圆。<circle>标签的cxcyr质量分别为横坐标、纵坐标和半径,单位为像素。坐标都以对立于<svg>画布的左上角原点。

class属性用来内定相应的 CSS 类。

CSS

.red { fill: red; } .fancy { fill: none; stroke: black; stroke-width:
3pt; }

1
2
3
4
5
6
7
8
9
.red {
  fill: red;
}
 
.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

SVG 的 CSS 属性与网页元素有所分化。

  • fill:填充色
  • stroke:描边色
  • stroke-width:边框宽度

那段HTML展现的结果如下:

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

5. 组合clip-path做遮罩效果

动用CSS平常只好用border-radius做一些圆角的遮罩,即用border-radius结合overflow:
hidden达成,但是选取clip-path +
svg的路线能够做出放4形状遮罩,如下做3个心形的:

4858美高梅 16

如下代码所示:

<div style=”width:200px;height:200px”> <img src=”photo.png” alt
style=”width:100%”> </div> <style> img { clip-path:
url(“#heart”); } </style>

1
2
3
4
5
6
7
8
<div style="width:200px;height:200px">
    <img src="photo.png" alt style="width:100%">
</div>
<style>
img {
    clip-path: url("#heart");
}
</style>

style里面的id: #heart是指向了二个SVG的的clip帕特h,如下图所示:

<svg xmlns=”” width=”0″ height=”0″>
<clipPath id=”heart” clipPathUnits=”objectBoundingBox”> <path
transform=”scale(0.0081967, 0.0101010)”
d=”m61.18795,24.08746c24.91828,-57.29309 122.5489,0
0,73.66254c-122.5489,-73.66254 -24.91828,-130.95562 0,-73.66254z”/>
</clipPath> </svg>

1
2
3
4
5
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <clipPath id="heart" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.0081967, 0.0101010)" d="m61.18795,24.08746c24.91828,-57.29309 122.5489,0 0,73.66254c-122.5489,-73.66254 -24.91828,-130.95562 0,-73.66254z"/>
    </clipPath>
</svg>

为了让那几个path刚好能撑起div容器宽度的百分之百,必要设置:

clipPathUnits=”objectBoundingBox”

1
clipPathUnits="objectBoundingBox"

那般会变成d属性里面包车型地铁单位成为比例的0到一,所以供给把它收缩一下,原本的width是12二,height是9九,须要供给scale的值为(1
/ 12贰, 一 /
9玖)。那样就直达百分百占满的目标,假如一发轫d属性坐标比例正是0到1,就毫无那样搞了。

除此以外clip-path使用svg的path不扶助变形动画。

本篇介绍了使用svg路线path做的二种效应:做2个门路动画、不规则形状的点击、沿路径拖拽、路线的变形动画以及和clip-path做一些遮罩效果。能够说svg的path效果还是很有力的,当您有个别效果用html/css无法完结的时候,不要紧往svg的大势考虑。

1 赞 1 收藏
评论

4858美高梅 17

2.3 <line>标签

<line>标签用来绘制直线。

<svg width=”300″ height=”180″> <line x1=”0″ y1=”0″ x2=”200″
y2=”0″ style=”stroke:rgb(0,0,0);stroke-width:5″ /> </svg>

1
2
3
<svg width="300" height="180">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>

上面代码中,<line>`标签的x1属性和y1属性,表示线段起点的横坐标和纵坐标;x2属性和y2属性,表示线段终点的横坐标和纵坐标;style`属性表示线段的体制。

4858美高梅 18

  那段HTML展现的结果如下:

2.4 <polyline>图像入门教程,Path路线在网页开垦的效应。标签

<polyline>标签用于绘制一根折线。

<svg width=”300″ height=”180″> <polyline points=”3,3 30,28
3,53″ fill=”none” stroke=”black” /> </svg>

1
2
3
<svg width="300" height="180">
  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>

``<polyline>points性子钦点了种种端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

 

 

这一个事例画了大多模样:正常的矩形,带圆角的矩形,圆形,长方形,直线,折线,多边形,还有路线。那个都属于基本的图纸成分。固然绘制五个图纸有许多种主意,比方矩形能够用rect完成,也能够用path等达成,可是大家依旧应该尽恐怕保证SVG的剧情短小精悍,易于阅读。 

4858美高梅 19 

2.5 <rect>标签

<rect>标签用于绘制矩形。

<svg width=”300″ height=”180″> <rect x=”0″ y=”0″ height=”100″
width=”200″ style=”stroke: #70d5dd; fill: #dd524b” /> </svg>

1
2
3
<svg width="300" height="180">
  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>

<rect>x属性和y个性,钦赐了矩形左上角端点的横坐标和纵坐标;width属性和height品质钦点了矩形的增幅和惊人(单位像素)。

上边是各样造型的运用表明(这里只介绍调整图形形状和岗位的骨干品质,填充等天性放到前面总计)。

那一个事例画了广大形象:不奇怪的矩形,带圆角的矩形,圆形,正方形,直线,折线,多边形,还有路线。那几个都属于基本的图纸成分。尽管绘制二个图形有许多种方法,比方矩形能够用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元素
  折线首倘使要定义每条线段的端点就可以,所以只须要一个点的集纳作为参数:
points:一文山会海的用空格,逗号,换行符等分隔开分离的点。各样点必须有叁个数字:x值和y值。所以上面一个点
(0,0), (一,1)和(2,2)可以写成:”0 0, 1 一, 二 贰”。
 
多边形 – polygon元素
  那几个成分正是比polyline成分多做一步,把最终七个点和率先个点连起来,形成密闭图形。参数是同样的。
points:一密密麻麻的用空格,逗号,换行符等分隔绝的点。各种点必须有三个数字:x值和y值。所以上边2个点
(0,0), (1,1)和(2,2)能够写成:”0 0, 1 壹, 二 2″。
 
路径 – path元素
  这么些是最通用,最强力的要素了;使用那一个成分你能够落成别的其他的图样,不仅囊括地点这些大旨造型,也得以达成像贝塞尔曲线那样的错综复杂形态;其余,使用path能够兑现平滑的过渡线段,即使也能够使用polyline来兑现那种效率,可是急需提供的点不少,而且放大了职能也不佳。那几个因素控制地方和形象的唯有一个参数:
d:一连串绘制指令和制图参数(点)组合成。
  绘制指令分为相对坐标指令和相对坐标指令三种,那两种指令使用的假名是同样的,正是大小写不平等,相对指令使用大写字母,坐标也是纯属坐标;相对指令使用相应的小写字母,点的坐标表示的都以偏移量。
纯属坐标绘制指令
  那组命令的参数代表的是纯属坐标。假使当前画笔所在的职位为(x0,y0),则下边包车型客车断然坐标指令代表的意思如下所示:

2.6 <ellipse>标签

<ellipse>标签用于绘制椭圆。

<svg width=”300″ height=”180″> <ellipse cx=”60″ cy=”60″ ry=”40″
rx=”20″ stroke=”black” stroke-width=”5″ fill=”silver”/> </svg>

1
2
3
<svg width="300" height="180">
  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>

<ellipse>cx属性和cy质量,钦命了椭圆中央的横坐标和纵坐标(单位像素);rx属性和ry性情,钦赐了椭圆横向轴和纵向轴的半径(单位像素)。

矩形 – rect元素 这几个因素有5个调控地方和样子的属性,分别是:
x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形中度。
rx:完成圆角效果时,圆角沿x轴的半径。
ry:实现圆角效果时,圆角沿y轴的半径。
比如上边例子中,落成了圆角意义,你也足以通过设置rx,ry为分歧的值完毕椭圆角效果。

 

2.7 <polygon>标签

<polygon>标签用于绘制多边形。

<svg width=”300″ height=”180″> <polygon fill=”green”
stroke=”orange” stroke-width=”1″ points=”0,0 100,0 100,100 0,100
0,0″/> </svg>

1
2
3
<svg width="300" height="180">
  <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>

<polygon>points属性钦赐了各类端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

圆 – 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命令,则绘制线段,而不是封闭图形。

2.8 <path>标签

<path>标签用于制路线。

<svg width=”300″ height=”180″> <path d=” M 18,3 L 46,3 L 46,40
L 61,40 L 32,68 L 3,40 L 18,40 Z “></path> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
<svg width="300" height="180">
<path d="
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"></path>
</svg>

<path>d质量表示绘制顺序,它的值是三个长字符串,各个字母代表一个制图动作,前面随着坐标。

  • M:移动到(moveto)
  • L:画直线到(lineto)
  • Z:闭合路径

椭圆 – ellipse元素 以此是进一步通用的圈子成分,你能够分别调控半长轴和半短轴的长度,来促成差异的椭圆,很轻松想到,当五个半轴相等时,正是正圆形了。
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。

  

2.9 <text>标签

<text>标签用于绘制文本。

<svg width=”300″ height=”180″> <text x=”50″ y=”25″>Hello
World</text> </svg>

1
2
3
<svg width="300" height="180">
  <text x="50" y="25">Hello World</text>
</svg>

<text>x属性和y品质,表示文本区块基线(baseline)起源的横坐标和纵坐标。文字的体裁能够用classstyle质量钦定。

直线 – line元素 直线需要定义起源与终端就可以:

一举手一投足画笔指令M,画直线指令:L,H,V,闭合指令Z都比较轻巧;下边器重看看绘制曲线的多少个指令。
绘制圆弧指令:A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
  用圆弧连接3个点相比较复杂,情况也大多,所以这几个命令有八个参数,分别调控曲线的的逐①属性。上边解释一下数值的意义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation
是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为一 代表大角度弧线,0 代表小角度弧线。
sweep-flag 为一表示从起源到巅峰弧线绕大旨顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
  前四个参数和后八个参数就不多说了,很简短;下边就说说中间的一个参数:
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>

2.10 <use>标签

<use>标签用于复制二个形态。

<svg viewBox=”0 0 30 10″ xmlns=”;
<circle id=”myCircle” cx=”5″ cy=”5″ r=”4″/> <use
href=”#myCircle” x=”10″ y=”0″ fill=”blue” /> <use
href=”#myCircle” x=”20″ y=”0″ fill=”white” stroke=”blue” />
</svg>

1
2
3
4
5
6
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4"/>
 
  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>

<use>href属性内定所要复制的节点,x属性和y属性是<use>左上角的坐标。此外,还足以钦赐widthheight坐标。

x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。

  下面的HTML画出下边包车型地铁图片:

2.11 <g>标签

<g>标签用于将七个造型组成二个组(group),方便复用。

<svg width=”300″ height=”100″> <g id=”myCircle”> <text
x=”25″ y=”20″>圆形</text> <circle cx=”50″ cy=”50″
r=”20″/> </g> <use href=”#myCircle” x=”100″ y=”0″
fill=”blue” /> <use href=”#myCircle” x=”200″ y=”0″ fill=”white”
stroke=”blue” /> </svg>

1
2
3
4
5
6
7
8
9
<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圆形</text>
    <circle cx="50" cy="50" r="20"/>
  </g>
 
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

折线 – polyline元素 折线首借使要定义每条线段的端点就可以,所以只需求三个点的集合营为参数:

 

2.12 <defs>标签

<defs>标签用于自定义形状,它里面包车型地铁代码不会显得,仅供引用。

<svg width=”300″ height=”100″> <defs> <g
id=”myCircle”> <text x=”25″ y=”20″>圆形</text> <circle
cx=”50″ cy=”50″ r=”20″/> </g> </defs> <use
href=”#myCircle” x=”0″ y=”0″ /> <use href=”#myCircle” x=”100″
y=”0″ fill=”blue” /> <use href=”#myCircle” x=”200″ y=”0″
fill=”white” stroke=”blue” /> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>
 
  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

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

4858美高梅 20 

2.13 <pattern>标签

<pattern>标签用于自定义多少个造型,该形象能够被引述来平铺一个区域。

JavaScript

<svg width=”500″ height=”500″> <defs> <pattern id=”dots”
x=”0″ y=”0″ width=”100″ height=”100″ patternUnits=”userSpaceOnUse”>
<circle fill=”#bee9e8″ cx=”50″ cy=”50″ r=”35″ /> </pattern>
</defs> <rect x=”0″ y=”0″ width=”100%” height=”100%”
fill=”url(#dots)” /> </svg>

1
2
3
4
5
6
7
8
<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

地点代码中,<pattern>标签将壹个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的幅度和长度是实际上的像素值。然后,钦命这一个方式去填充下边包车型客车矩形。

多边形 – polygon元素 本条成分正是比polyline成分多做一步,把最终贰个点和率先个点连起来,形成闭合图形。参数是同样的。
points:一文山会海的用空格,逗号,换行符等分隔开分离的点。每一种点必须有二个数字:x值和y值。所以上面二个点
(0,0), (一,一)和(贰,二)能够写成:”0 0, 1 一, 二 二”。

从图中能够看来椭圆旋转参数的不等形成绘制的圆弧方向差别,当然这几个参数对正圆来讲未有影响。
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>

2.14 <image>标签

<image>标签用于插入图片文件。

<svg viewBox=”0 0 100 100″ width=”100″ height=”100″> <image
xlink:href=”path/to/image.jpg” width=”50%” height=”50%”/>
</svg>

1
2
3
4
<svg viewBox="0 0 100 100" width="100" height="100">
  <image xlink:href="path/to/image.jpg"
    width="50%" height="50%"/>
</svg>

地点代码中,<image>xlink:href质量表示图像的根源。

路径 – path元素 这一个是最通用,最强力的因素了;使用那么些成分你能够达成其余别的的图片,不仅囊括地点这几个基本造型,也足以兑现像贝塞尔曲线那样的复杂形态;别的,使用path能够兑现平滑的过渡线段,尽管也足以动用polyline来兑现那种成效,但是急需提供的点众多,而且放大了意义也倒霉。这一个因素调节地点和形制的唯有三个参数:
d:一名目许多绘制指令和制图参数(点)组合成。

  那个HTML绘制了上边包车型大巴几幅图:

2.15 <animate>标签

<animate>标签用于发生动画效果。

<svg width=”500px” height=”500px”> <rect x=”0″ y=”0″
width=”100″ height=”100″ fill=”#feac5e”> <animate
attributeName=”x” from=”0″ to=”500″ dur=”2s” repeatCount=”indefinite”
/> </rect> </svg>

1
2
3
4
5
<svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

上面代码中,矩形会随地运动,发生动画效果。

<animate>的属性含义如下。

  • attributeName:发生动画效果的属性名。
  • from:单次动画的开始值。
  • to:单次动画的结束值。
  • dur:单次动画的持续时间。
  • repeatCount:动画的大循环方式。

能够在两性子情上边定义动画。

<animate attributeName=”x” from=”0″ to=”500″ dur=”2s”
repeatCount=”indefinite” /> <animate attributeName=”width”
to=”500″ dur=”2s” repeatCount=”indefinite” />

1
2
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />

制图指令分为绝对坐标指令和周旋坐标指令三种,那两种指令使用的字母是同壹的,就是大大小小写不1致,相对指令使用大写字母,坐标也是相对坐标;相对指令使用相应的小写字母,点的坐标表示的都以偏移量。 

 

2.16 <animateTransform>标签

<animate>标签对 CSS
transform性格不起功能,假如急需变形,就要接纳<animateTransform>标签。

<svg width=”500px” height=”500px”> <rect x=”250″ y=”250″
width=”50″ height=”50″ fill=”#4bc0c8″> <animateTransform
attributeName=”transform” type=”rotate” begin=”0s” dur=”10s” from=”0 200
200″ to=”360 400 400″ repeatCount=”indefinite” /> </rect>
</svg>

1
2
3
4
5
<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
  </rect>
</svg>

地方代码中,<animateTransform>的意义为旋转(rotate),这时fromto属性值有多少个数字,第2个数字是角度值,第1个值和第四个值是旋转中央的坐标。from="0 200 200"意味着早先时,角度为0,围绕(200, 200)开始旋转;to="360 400 400"表示甘休时,角度为360,围绕(400, 400)旋转。

相对坐标绘制指令 那组命令的参数代表的是绝对坐标。要是当前画笔所在的义务为(x0,y0),则上面包车型地铁相对坐标指令代表的含义如下所示:

4858美高梅 21 

三、JavaScript 操作

指令 参数 说明
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分明一段圆弧须要的参数。这里也见到,SVG中的圆弧比canvas中的复杂一些。

3.1 DOM 操作

万1 SVG 代码直接写在 HTML 网页之中,它就改成网页 DOM
的一局地,可以一贯用 DOM 操作。

<svg id=”mysvg” xmlns=”” viewBox=”0 0 800
600″ preserveAspectRatio=”xMidYMid meet” > <circle id=”mycircle”
cx=”400″ cy=”300″ r=”50″ /> <svg>

1
2
3
4
5
6
7
8
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>

上边代码插入网页之后,就可以用 CSS 定制样式。

CSS

circle { stroke-width: 5; stroke: #f00; fill: #ff0; } circle:hover {
stroke: #090; fill: #fff; }

1
2
3
4
5
6
7
8
9
10
circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}
 
circle:hover {
  stroke: #090;
  fill: #fff;
}

接下来,能够用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById(‘mycircle’);
mycircle.addEventListener(‘click’, function(e) { console.log(‘circle
clicked – enlarging’); mycircle.setAttribute(‘r’, 60); }, false);

1
2
3
4
5
6
var mycircle = document.getElementById(‘mycircle’);
 
mycircle.addEventListener(‘click’, function(e) {
  console.log(‘circle clicked – enlarging’);
  mycircle.setAttribute(‘r’, 60);
}, false);

地点代码钦赐,假如点击图片,就改写circle元素的r属性。

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

制图三次贝塞尔曲线指令:C  x一 y一, x贰 y2, x y          
  一遍贝塞尔曲线有七个调整点,就是(x1,y一)和(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>

3.2 获取 SVG DOM

使用<object><iframe><embed>标签插入 SVG 文件,能够收获 SVG
DOM。

var svgObject = document.getElementById(‘object’).contentDocument; var
svgIframe = document.getElementById(‘iframe’).contentDocument; var
svgEmbed = document.getElementById(’embed’).getSVGDocument();

1
2
3
var svgObject = document.getElementById(‘object’).contentDocument;
var svgIframe = document.getElementById(‘iframe’).contentDocument;
var svgEmbed = document.getElementById(’embed’).getSVGDocument();

注意,若是使用<img>标签插入 SVG 文件,就不可能赚取 SVG DOM。

绘制圆弧指令: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 是弧终端坐标。
前多个参数和后多个参数就不多说了,相当粗略;上面就说说中间的一个参数:
x-axis-rotation代表旋转的角度,体会下边例子中圆弧的不等:

  这些HTML片段绘制了上面包车型地铁图片:

3.3 读取 SVG 源码

鉴于 SVG 文件就是1段 XML 文本,因而能够透过读取 XML 代码的艺术,读取
SVG 源码。

<div id=”svg-container”> <svg
xmlns=””
xmlns:xlink=”” xml:space=”preserve”
width=”500″ height=”440″ > <!– svg code –> </svg>
</div>

1
2
3
4
5
6
7
8
9
<div id="svg-container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve" width="500" height="440"
  >
    <!– svg code –>
  </svg>
</div>

使用XMLSerializer实例的serializeToString()措施,获取 SVG
元素的代码。

var svgString = new XMLSerializer()
.serializeToString(document.querySelector(‘svg’));

1
2
var svgString = new XMLSerializer()
  .serializeToString(document.querySelector(‘svg’));

代码如下:

  
   4858美高梅 22

三.肆 SVG 图像转为 Canvas 图像

先是,须要新建二个Image目的,将 SVG
图像钦赐到该Image对象的src4858美高梅,属性。

JavaScript

var img = new Image(); var svg = new Blob([svgString], {type:
“image/svg+xml;charset=utf-8”}); var DOMURL = self.URL || self.webkitURL
|| self; var url = DOMURL.createObjectURL(svg); img.src = url;

1
2
3
4
5
6
7
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
 
var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);
 
img.src = url;

然后,当图像加载成功后,再将它绘制到<canvas>元素。

JavaScript

img.onload = function () { var canvas =
document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’);
ctx.drawImage(img, 0, 0); };

1
2
3
4
5
img.onload = function () {
  var canvas = document.getElementById(‘canvas’);
  var ctx = canvas.getContext(‘2d’);
  ctx.drawImage(img, 0, 0);
};

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

 

四、实例:折线图

上面将一张数据表格画成折线图。

Date |Amount —–|—— 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 |
$40 2014-04-01 | $80

1
2
3
4
5
6
Date |Amount
—–|——
2014-01-01 | $10
2014-02-01 | $20
2014-03-01 | $40
2014-04-01 | $80

地点的图样,能够画成三个坐标系,Date用作横轴,Amount用作纵轴,四行数据画成三个数根据地。

<svg width=”350″ height=”160″> <g class=”layer”
transform=”translate(60,10)”> <circle r=”5″ cx=”0″ cy=”105″ />
<circle r=”5″ cx=”90″ cy=”90″ /> <circle r=”5″ cx=”180″ cy=”60″
/> <circle r=”5″ cx=”270″ cy=”0″ /> <g class=”y axis”>
<line x1=”0″ y1=”0″ x2=”0″ y2=”120″ /> <text x=”-40″ y=”105″
dy=”5″>$10</text> <text x=”-40″ y=”0″
dy=”5″>$80</text> </g> <g class=”x axis”
transform=”translate(0, 120)”> <line x1=”0″ y1=”0″ x2=”270″ y2=”0″
/> <text x=”-30″ y=”20″>January 2014</text> <text
x=”240″ y=”20″>April</text> </g> </g> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<svg width="350" height="160">
  <g class="layer" transform="translate(60,10)">
    <circle r="5" cx="0"   cy="105" />
    <circle r="5" cx="90"  cy="90"  />
    <circle r="5" cx="180" cy="60"  />
    <circle r="5" cx="270" cy="0"   />
 
    <g class="y axis">
      <line x1="0" y1="0" x2="0" y2="120" />
      <text x="-40" y="105" dy="5">$10</text>
      <text x="-40" y="0"   dy="5">$80</text>
    </g>
    <g class="x axis" transform="translate(0, 120)">
      <line x1="0" y1="0" x2="270" y2="0" />
      <text x="-30"   y="20">January 2014</text>
      <text x="240" y="20">April</text>
    </g>
  </g>
</svg>

地点的HTML画出上面包车型大巴图形:

从上面我们得以看出,调控点调节了曲线的弧度。
 
特殊版本的一次贝塞尔曲线:S  x二 y2, x y
  诸多时候,为了绘制平滑的曲线,必要频仍老是绘制曲线。那年,为了平滑过渡,日常第一个曲线的调控点是首先个曲线调控点在曲线其余壹边的映射点。这年能够行使那些简化版本。这里要留心的是,若是S指令前边未有别的的S指令或C指令,今年会感觉多个调控点是壹律的,退化成一次贝塞尔曲线的表率;假设S指令是用在别的1个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>

5、参考链接

  • Jon McPartland, An introduction to SVG
    animation
  • Alexander Goedde, SVG – Super Vector
    Graphics
  • Joseph Wegner, Learning
    SVG
  • biovisualize, Direct svg to canvas to png
    conversion
  • Tyler Sticka, Cropping Image Thumbnails with
    SVG
  • Adi Purdila, How to Create a Loader Icon With SVG
    Animations

(完)

1 赞 收藏
评论

4858美高梅 23

4858美高梅 24

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

 
从图中能够看来椭圆旋转参数的不等形成绘制的拱形方向不一致,当然这些参数对正圆来讲未有影响。

 

large-arc-flag和sweep-flag调整了圆弧的深浅和走向,体会下边例子中圆弧的例外:

4858美高梅 25 

代码如下:

地点的S指令唯有第3个调控点,第贰个调节点采用了日前的曲线指令的第一个调整点的贰个映射点。

<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 
(特殊版本的贰回贝塞尔曲线)
  3次贝塞尔曲线唯有二个调控点(x壹,y1),平常如下图所示:

本条HTML绘制了上边的几幅图:

 

4858美高梅 26

4858美高梅 27 

 
从地点能够看出,这多少个参数其实是唯1分明1段圆弧须求的参数。这里也看出,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>

绘制2遍贝塞尔曲线指令:C  x壹 y1, x2 y贰, x y          

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

一次贝塞尔曲线有三个调控点,正是(x一,y一)和(x二,y二),最前面(x,y)代表曲线的终极。体会上面包车型客车例证:

 

代码如下:

4858美高梅 28 

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

 

那些HTML片段绘制了下边包车型地铁图样:
4858美高梅 29

未有差距于的,纵然T指令前边不是Q或然T指令,则感到无调节点,画出来的是直线。

 从地点大家能够阅览,调整点调整了曲线的弧度。

相对坐标绘制指令
  与绝对坐标绘制指令的字母是同样的,只但是全体是小写表示。那组命令的参数中关系坐标的参数代表的是相对坐标,意思正是参数代表的是从当前点到目标点的偏移量,正数就表示向轴正向偏移,负数代表向反向偏移。不过对Z指令来讲,大小写未有分别。

独特版本的一回贝塞尔曲线:S  x贰 y贰, x y

  这里要小心,相对坐标指令与绝对坐标指令是足以勾兑使用的。有时混合使用能够拉动越来越灵活的画法。

广大时候,为了绘制平滑的曲线,要求频仍连接绘制曲线。那个时候,为了平滑过渡,日常第3个曲线的调整点是首先个曲线调控点在曲线其它1方面的映射点。这年能够利用这几个简化版本。这里要小心的是,要是S指令前边未有别的的S指令或C指令,这年会感到多个调节点是壹律的,退化成3次贝塞尔曲线的指南;假使S指令是用在别的2个S指令恐怕C指令前面,今年背后那么些S指令的率先个调节点会暗中认可设置为日前的这么些曲线的首个调整点的1个映射点,体会一下:

 

代码如下:

SVG path绘制注意事项:
  绘制带孔的图片时要小心:外层边的绘图需若是逆时针顺序的,里面包车型地铁洞的边的相继必须是顺时针的。只有如此绘制的图形填充效果才会不错。

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

 

本条HTML片段绘制如下图形:

摘自  战场秋点兵
 

4858美高梅 30

SVG提供了繁多的主干造型,这一个成分得以间接使用,那点比canvas大多了。废话不说了,直接看例子,那个最直白:
svg width=200…

地点的S指令唯有第壹个调整点,第3个调整点选取了前边的曲线指令的第三个调控点的2个映射点。

绘图一回贝塞尔曲线指令:Q  x壹 y1, x y , T x
y  (特殊版本的三回贝塞尔曲线)
三回贝塞尔曲线惟有叁个调控点(x一,y一),经常如下图所示:

4858美高梅 31

举个例子是连连的绘图曲线,同样能够应用简化版本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>

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

4858美高梅 32

 
同等的,假诺T指令前边不是Q大概T指令,则感觉无调控点,画出来的是直线。

相对坐标绘制指令 与相对坐标绘制指令的假名是1模同样的,只但是全部是小写表示。那组命令的参数中关系坐标的参数代表的是相对坐标,意思就是参数代表的是从当前点到目的点的偏移量,正数就意味着向轴正向偏移,负数代表向反向偏移。但是对Z指令来讲,大小写未有分裂。

这里要注意,绝对坐标指令与相对坐标指令是足以勾兑使用的。有时混合使用能够带来越来越灵活的画法。

SVG path绘制注意事项: 制图带孔的图形时要小心:外层边的绘图需要是逆时针顺序的,里面包车型地铁洞的边的次第必须是顺时针的。唯有那样绘制的图片填充效果才会不错。

实用参考:
脚本索引:
支付中央:
人心向背参考:
合法文书档案:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有