澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站图像入门教程,svg学习笔记

2019-07-07 作者:澳门新萄京赌场网址   |   浏览(188)

三看 SVG Web 动效

2016/11/30 · HTML5 · 1 评论 · SVG

原文出处: 凹凸实验室   

澳门新萄京官方网站 1

CSS3 动效玩腻了吗?没关系的,我们还有 SVG。

Welikesmall 是一个互联网品牌宣传代理,这是我见过的最喜欢使用 SVG 做动效的网页设计团队。事实上,越来越多的网页动效达人选择在 SVG 的疆土上开辟动效的土壤,即便 SMIL 寿将终寝,事实上这反而将 SVG 动效推向了一个新的世界:CSS3 Animation SVG。

澳门新萄京官方网站 2

(SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features)

还记得我在久远的《以电影之眼看 CSS3 动画》中说道:“CSS3 动画简直拥有了整个世界!”那么带上 SVG 的 CSS3 动画则已突破天际向着宇宙级的可能性前进(感觉给自己挖了一个无比巨大的坑,网页动画界可不敢再出新技术了[扶额])。

CSS 与 SVG 的打通无疑将 html 代码的可读性又推上一个台阶,我们可以通过 CSS 控制 SVG 图形的尺寸、填色、边框色、过渡、移动变幻等相当实用的各种属性,除此之外,将图形分解的动画在这种条件下也变得相当简单。

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形, 主要优势在于可缩放的同时不会影响图片的质量。

SVG——可扩展适量图形,基于XML

基本形状
  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 图像入门教程

2018/08/07 · HTML5 · SVG

原文出处: 阮一峰   

索引

本文将讲到三个动效例子:

  • 箭头描线动效
  • 播放按钮滤镜动效
  • 虚线描线动效

动效来源:WLS-Adobe

即将聊到的 SVG 标签:

  • <path>
  • <g>
  • <symbol>
  • <defs>
  • <use>
  • <clipPath>
  • <mask>

以及属性:

  • viewBox
  • preserveAspectRatio
  • fill
  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • d
  • clip-path
  • mask

 

PC端:IE9    wap端:表现良好,适合使用

  <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 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

澳门新萄京官方网站 3

SVG 文件可以直接插入网页,成为 DOM 的一部分,然后用 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 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。

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

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

从一个简单的例子说起

澳门新萄京官方网站 4

要做出这样的效果,第一步是将图形画出来。徒手敲代码这种事还是留给图形工具来做,但是,为了更好地控制与制作动效,咱至少要做到读懂 SVG 代码。

SVG 的基本格式是使用 <svg> 标签对代码进行包裹,可直接将代码段插入 html 中,也可以保存成 svg 文件之后使用 imgobject 进行引用。

XHTML

<svg width="100%" height="100%"> <!-- SVG markup here. --> </svg>

1
2
3
<svg width="100%" height="100%">
<!-- SVG markup here. -->
</svg>

由于交互动效所需,这里仅介绍直接使用 svg 标签的情况。

XHTML

<svg width="90" height="13" viewBox="0 0 89.4 12.4"> <line x1="0" y1="6.2" x2="59.6" y2="6.2"></line> <line x1="54.7" y1="0.7" x2="60.5" y2="6.5"></line> <line x1="54.7" y1="11.7" x2="60.5" y2="5.8"></line> </svg>

1
2
3
4
5
<svg width="90" height="13" viewBox="0 0 89.4 12.4">
<line x1="0" y1="6.2" x2="59.6" y2="6.2"></line>
<line x1="54.7" y1="0.7" x2="60.5" y2="6.5"></line>
<line x1="54.7" y1="11.7" x2="60.5" y2="5.8"></line>
</svg>

这是箭头的代码段,使用了最简单的线条进行绘制。可以看到其中包裹了许多坐标样的属性值。有坐标就意味着有坐标系。

SVG 的坐标系存在三个概念:视窗、视窗坐标系、用户坐标系。视窗坐标系与用户坐标系属于 SVG 的两种坐标系统,默认情况下这两个坐标系的点是一一对应的。与 web 其他坐标系相同,原点位于视窗的左上角,x 轴水平向右,y 轴垂直向下。

澳门新萄京官方网站 5

(图片来源:MDN-SVG Tutorial-Positions)

SVG 的位置、大小与文档流中的块级元素相同,都可由 CSS 进行控制。

视窗即为在页面中 SVG 设定的尺寸可见部分,默认情况下 SVG 超出隐藏。

SVG 能通过 viewBox 属性就完成图形的位移与缩放。

viewBox属性值的格式为(x0,y0,u_width,u_height),每个值之间用逗号或者空格隔开,它们共同确定了视窗显示的区域:视窗左上角坐标设为(x0,y0)、视窗的宽设为 u_width,高为 u_height;这个变换对整个视窗都起作用。

下图展示了当 viewBox 尺寸与 SVG 尺寸相同、放大一倍、缩小一倍时的表现:

澳门新萄京官方网站 6

澳门新萄京官方网站 7

澳门新萄京官方网站 8

一句话总结,就是用户坐标系需要以某种方式铺满整个视窗。默认的方式是以最短边为准铺满,也就是类似 background-size 中的 cover 值。通过 preserveAspectRatio 属性你可以控制用户坐标系的展开方式与位置,完美满足你的各种需求。

preserveAspectRatio 是一個以對齊為主,然後再選擇要自動填滿還是咖掉的屬性。——引用来源《SVG 研究之路 (23) – 理解 viewport 與 viewbox》

属性的语法如下:preserveAspectRatio="[defer] <align> [<meetOrSlice>]"

注意3个参数之间需要使用空格隔开。

defer:可选参数,只对 image 元素有效,如果 image 元素中 preserveAspectRatio 属性的值以 defer 开头,则意味着 image 元素使用引用图片的缩放比例,如果被引用的图片没有缩放比例,则忽略 defer。所有其他的元素都忽略这个字符串。

meetOrSlice:可选参数,可以去下列值:

  • meet – 默认值,统一缩放图形,让图形全部显示在 viewport 中。
  • slice – 统一缩放图形,让图形充满 viewport,超出的部分被剪裁掉。

——引用来源《突袭 HTML5 之 SVG 2D 入门6 – 坐标与变换》

align:必选参数。由两个名词组成。

這兩個名詞分別代表 viewbox 與 viewport 的 x 方向對齊模式,以及 y 方向的對齊模式,換句話說,可以想成:「水平置中 垂直靠上對齊」的這種感覺,不過在這個 align 的表現手法倒是很抽象,可以用下方的表格看出端倪:

澳门新萄京官方网站 9

也因此我們要做一個「水平置中 垂直靠上對齊」的 viewbox 設定,就必須寫成:xMidYMin,做一個「水平靠右對齊 垂直靠下對齊」的 viewbox 設定,就必須寫成:xMaxYMax,不過這裡有個細節請特別注意,「Y」是大寫呀!真是不知道為什麼會這樣設計,我想或許跟命名規則有關吧!

——引用来源《SVG 研究之路 (23) – 理解 viewport 與 viewbox》

下图诠释了各种填充的效果:

澳门新萄京官方网站 10

(图片来源:7 Coordinate Systems, Transformations and Units)

在这一层面处理好图形的展示之后,剩下的所有变换,无论是 translate、rotate 还是 opacity,我们都可以全权交给 CSS 来处理,并且可以将图形细化到形状或者路径的层面进行变换。

然而实际情况是,刚才的那段代码,放进codepen之后是什么也看不见的,原因就在于这个路径的绘制既没有填充颜色也没有描边。

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

二、语法

填充——fill

fill 属性用于给形状填充颜色。

CSS

svg line { fill: #000; /* 填充黑色 */ }

1
2
3
svg line {
fill: #000; /* 填充黑色 */
}

填充色的透明度通过 fill-opacity 设置。

fill-rule 用于设置填充方式,算法较为抽象,除了 inherit 这个取值,还可取以下两种值:

nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一个交点处的线段是从左到右的,就加1;每有一个交点处的线段是从右到左的,就减1;这样计算完所有交点后,如果这个计算的结果不等于0,则该点在图形内,需要填充;如果该值等于0,则在图形外,不需要填充。看下面的示例:

澳门新萄京官方网站 11

evenodd:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的个数,个数为奇数则改点在图形内,需要填充;个数为偶数则点在图形外,不需要填充。看下图的示例:

澳门新萄京官方网站 12

——引用来源《突袭 HTML5 之 SVG 2D 入门4 – 笔画与填充》

然而我们发现,我们的箭头即使填充了颜色,还是什么也看不见,问题就出在我们绘制的时候使用了没有面积的 line 标签。这个时候,就需要出动描边了。

1.使用<img>元素来嵌入SVG图像

line(线段)  <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line>

  <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.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 图像是100像素宽 x 100像素高,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。

注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。

如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。

描边——stroke

这个 stroke 可得大书特书,因为光是这个 stroke 就能搞定80%的描线动效。

直接通过 stroke 设置描边色,我们就能立刻看到刚才的箭头了。通过 stroke-width 则可以对描边的粗细进行修改。

CSS

svg line { stroke: #000; stroke-width: 1px; }

1
2
3
4
svg line {
stroke: #000;
stroke-width: 1px;
}

澳门新萄京官方网站 13

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

polyline(折线) <polyline points="250 75,350 100,100 0" stroke="#1A9EF2" fill="none"></polyline>

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

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:边框宽度

线的虚实:stroke-dasharray

(敲黑板)王牌属性出现辣!
这个属性的属性值是1到 n 个数字,多个数字由逗号隔开,CSS 中的定义则由空格分开,每个数字定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。

下面是设置了1个、2个、3个数字时虚线的描绘情况对比:

澳门新萄京官方网站 14

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

circle(圆)   <circle cx="135" cy="35" r="20" style="stroke: none;fill: #ddd;"></circle>

  这段HTML显示的结果如下:

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`属性表示线段的样式。

stroke-dashoffset

(敲黑板)这个也是重点属性!
当我们将描边虚实设置成实线部分与图形描边长度相同时,我们是看不到空白段的部分的。这时形状的描边就像完全描绘出来了一样。这时我们使用这个属性,将虚线开始的位置稍微做一下移动,无论是往前移还是往后移,我们都能看到图形描边出现了一段空白,当这个移动形成一个连续的动作时,描线动效就这么不经意的出现了(蓦然回首)。

CSS

svg line { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset ease-in .5s; }   svg:hover line { stroke-dashoffset: 0; }

1
2
3
4
5
6
7
8
9
svg line {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset ease-in .5s;
}
&nbsp;
svg:hover line {
stroke-dashoffset: 0;
}

澳门新萄京官方网站 15

再对头部做个延时处理,修改一下虚线移动的方向,动效看起来会更顺眼一些。这个时候,SVG 可以分路径编辑的优势就体现出来了。对每个 line 添加一个类,我们就能对每条路径进行差异化处理(Codepen)。

XHTML

<svg width="360" height="52" viewBox="0 0 89.4 12.4"> <line class="arrow-line" x1="0" y1="6.2" x2="59.6" y2="6.2"></line> <line class="arrow-head" x1="54.7" y1="0.7" x2="60.5" y2="6.5"></line> <line class="arrow-head" x1="54.7" y1="11.7" x2="60.5" y2="5.8"></line> </svg>

1
2
3
4
5
<svg width="360" height="52" viewBox="0 0 89.4 12.4">
<line class="arrow-line" x1="0" y1="6.2" x2="59.6" y2="6.2"></line>
<line class="arrow-head" x1="54.7" y1="0.7" x2="60.5" y2="6.5"></line>
<line class="arrow-head" x1="54.7" y1="11.7" x2="60.5" y2="5.8"></line>
</svg>

CSS

svg line { fill: #000; stroke: #000; stroke-width: 1px; } .arrow-line { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset ease-in .5s .2s; } .arrow-head { stroke-dasharray: 9; stroke-dashoffset: -9; transition: stroke-dashoffset ease-in .2s; } svg:hover line { stroke-dashoffset: 0; } svg:hover .arrow-line { transition: stroke-dashoffset ease-in .5s; } svg:hover .arrow-head { transition: stroke-dashoffset ease-in .2s .5s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
svg line {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.arrow-line {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset ease-in .5s .2s;
}
.arrow-head {
stroke-dasharray: 9;
stroke-dashoffset: -9;
transition: stroke-dashoffset ease-in .2s;
}
svg:hover line {
stroke-dashoffset: 0;
}
svg:hover .arrow-line {
transition: stroke-dashoffset ease-in .5s;
}
svg:hover .arrow-head {
transition: stroke-dashoffset ease-in .2s .5s;
}

澳门新萄京官方网站 16

了解了这两个重点属性,动效剩下的重担,就落在了 dasharray 与 dashoffset 值的计算上了。这个步骤或许没有什么捷径,简单的直线、弧线之类的或许还能口算口算,其余的不规则图形也就只有多试这条傻路可走,如果你是图形高手就当我没说。

另外三个描边属性:stroke-linecapstroke-linejoinstroke-miterlimit 由于暂时用不上惨遭抛弃,具体可参考MDN-SVG Tutorial-Fills and Strokes,stroke-miterlimit 详解SVG 研究之路(16)- Stroke-miterlimit。

background: url(‘) no-repeat;

rect(矩形)   <rect x="10" y="10" rx="10" ry="10" width="50" height="60" style="stroke: #ccc;fill:#add;"></rect>

 

2.4 <polyline>标签

<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属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

图形绘制

箭头的绘制只用到了路径中最简单的直线路径 line,SVG 中还有矩形 rect、圆形 circle、椭圆 ellipse、折线 polyline、多边形 polygon 以及万能的路径 path。之所以将一些规整的图形单独出标签,是为了代码的可读性更强些,毕竟 SVG 的可读性已经没那么强了……

规整图形的属性较好理解(具体可参考MDN-SVG Tutorial-Path),这里深入讲解一下如何阅读路径 path 的代码。

3.使用svg元素,通过代码将SVG图像嵌入到HTML代码中

polygon(多边形) <polygon points="400 400,450 480,600,100,550 80"></polygon>

澳门新萄京官方网站 17 

绝对坐标绘制指令

这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:

澳门新萄京官方网站 18

移动画笔指令 M,画直线指令:LHV,闭合指令 Z 都比较简单;下面重点看看绘制曲线的几个指令。

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

ellipse(椭圆)  <ellipse cx="200" cy="500" rx="72" ry="45"></ellipse>

这个例子画了很多形状:正常的矩形,带圆角的矩形,圆形,椭圆形,直线,折线,多边形,还有路径。这些都属于基本的图形元素。虽然绘制一个图形有很多种方式,比如矩形可以用rect实现,也可以用path等实现,但是我们还是应该尽量保持SVG的内容短小精悍,易于阅读。
  下面是每个形状的使用说明(这里只介绍控制图形形状和位置的基本属性,填充等属性放到后面总结)。
矩形 - rect元素
  这个元素有6个控制位置和形状的属性,分别是:
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:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。
 
澳门新萄京官方网站,多边形 - polygon元素
  这个元素就是比polyline元素多做一步,把最后一个点和第一个点连起来,形成闭合图形。参数是一样的。
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。
 
路径 - path元素
  这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。这个元素控制位置和形状的只有一个参数:
d:一系列绘制指令和绘制参数(点)组合成。
  绘制指令分为绝对坐标指令和相对坐标指令两种,这两种指令使用的字母是一样的,就是大小写不一样,绝对指令使用大写字母,坐标也是绝对坐标;相对指令使用对应的小写字母,点的坐标表示的都是偏移量。
绝对坐标绘制指令
  这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:

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属性指定了矩形的宽度和高度(单位像素)。

绘制圆弧指令:A rx ry x-axis-rotation large-arc-flag sweep-flag x y

用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。下面解释一下数值的含义:
rx,ry 是弧所在的椭圆的半长轴、半短轴长度,rx 为 x 轴上的轴长,ry 为 y 轴上的周长。
x-axis-rotation 是此段弧的顺时针旋转角度,负数代表逆时针转动的角度。
large-arc-flag 两个值:101表示大角度弧线,0代表小角度弧线。
sweep-flag 两个值:101代表从起点到终点弧线绕中心顺时针方向,0代表逆时针方向。
x,y 是弧终端坐标。

为了更好的理解圆弧的绘制,我们来试试手动画一下 MDN 上的范例:

XHTML

<svg width="320px" height="320px" viewBox="0 0 320 320"> <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>

1
2
3
4
5
6
7
8
<svg width="320px" height="320px" viewBox="0 0 320 320">
<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>

澳门新萄京官方网站 19

首先是 ML 指令:

澳门新萄京官方网站 20

然后是 A 指令的绘制,在这一步可以看到 large-arc-flag(大小弧)与 sweep-flag(弧度方向)值的影响。

在本例中,弧度标记值为0,意味着选择小弧;弧度方向标记值为1澳门新萄京官方网站图像入门教程,svg学习笔记。,意味着选择起点到终点为顺时针方向的那条弧(别眨眼):

澳门新萄京官方网站 21

接下来我们省略掉 L 指令的绘制,来看看下一个圆弧。这个圆弧的旋转角度(x-axis-rotation)发生了变化,体会一下差异:

澳门新萄京官方网站 22

看了这么久,是不是挺纳闷这么难看的东西为什么一定要读懂?其实也不是强求各位看官能成为脑补 SVG 图形的天才,只是大概读懂这些难看的数字,在做动画的时候才会心里有底手上有劲点,至少大概知道这条东西画出来是什么样,而后再针对它写写动效。所以,我们继续看看图形界的万金油——贝塞尔曲线吧~!

……贝塞尔曲线被广泛地在计算机图形中用来为平滑曲线建立模型。贝塞尔曲线是矢量图形文件和相应软件(如 PostScript、PDF 等)能够处理的唯一曲线,用于光滑地近似其他曲线。二次和三次贝塞尔曲线最为常用。
引用来源:维基百科——贝塞尔曲线——应用

维基上有详细的贝塞尔曲线绘制公式与动图展示,这里就不做展开。

path 中的贝塞尔曲线指令共有四个:CSQT。SVG 只提供了最高阶到三次的贝塞尔曲线绘制指令,事实上大部分绘图软件也是如此。

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

 

 

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属性,指定了椭圆横向轴和纵向轴的半径(单位像素)。

三次贝塞尔曲线:C x1 y1, x2 y2, x y (或者 c dx1, dy1, dx2, dy2, dx dy)

三次贝塞尔曲线有两个控制点,就是(x1,y1)和(x2,y2),最后面(x,y)代表曲线的终点。

这个时候还是上动图比较省心。以下面的代码段为例:

1
2
3
<svg width=“300” height=“100” viewBox=“0 0 60 30”>
<path d=“M10 10 C 20 20, 40 20, 50 10” stroke=“#000” fill=“transparent”></path>
</svg>

绘制过程如下:

澳门新萄京官方网站 23

(手残,顺滑绘制过程请还是参考维基君。)

借助 PS 中的钢笔工具根据辅助线能迅速画出路径,可以免去那抽象的计算过程。

澳门新萄京官方网站 24

</svg>

组标签:

指令 参数 说明
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.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属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

简化版三次贝塞尔曲线:S x2 y2, x y (或者 s dx2 dy2, dx dy)

很多时候,曲线不止一个弧,为了平滑过渡,第二个曲线的控制点常常是第一个曲线控制点在曲线另外一边的映射点。这个时候可以使用这个简化版本。

这里要注意的是,如果 S 指令前面没有其他的 S 指令或 C 指令,这个时候会认为两个控制点是一样的,退化成二次贝塞尔曲线的样子;如果 S 指令是用在另外一个 S 指令或者 C 指令后面,这个时候后面这个 S 指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点。——《突袭 HTML5 之 SVG 2D 入门2 – 图形绘制》

这里重点讲解一下 S 指令中每个点对应的位置。同样借用 MDN 上的示例:

XHTML

<svg width="190" height="160"> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> </svg>

1
2
3
<svg width="190" height="160">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

澳门新萄京官方网站 25

兼容性

<g fill="dodgerblue">

  

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:闭合路径
二次贝塞尔曲线:Q x1 y1, x y (或者 q dx1 dy1, dx dy)

经历了三次贝塞尔曲线的洗礼,二次贝塞尔曲线看起来真是亲切。

XHTML

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

1
2
3
<svg width="190" height="160">
<path d="M10 80 Q 95 10, 180 80" stroke="black" fill="transparent"/>
</svg>

澳门新萄京官方网站 26

注:PS 中的钢笔工具绘制二次贝塞尔曲线只能通过三次贝塞尔曲线进行模拟,或许二次贝塞尔曲线最准确的绘制方法就是通过代码了吧。这里有一个可视化 Canvas 绘制贝塞尔曲线的网站——Canvas Quadratic Curve Example,实现方式比 SVG 还复杂[抠鼻]。

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

     <rect x="510" y="10" width="40" height="40" ry="10"/>

移动画笔指令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">
澳门新萄京官方网站图像入门教程,svg学习笔记。  <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.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属性指定。

简化版二次贝塞尔曲线:T x y(或者 t dx dy)

S 指令类似,为了更顺滑的多弧曲线,T 指令直接指定曲线终点,控制点自动计算。

同时,如果 T 指令只在上一个指令为 Q 或者 T 指令的情况下有效,否则当作 L 指令执行。

终于把贝塞尔讲完了……

 

     <rect x="610" y="80" width="40" height="40" ry="10" />

  上面的HTML画出下面的图形:

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坐标。

第二个神奇的动效

偷偷用一个箭头把 SVG 的填色、描边、路径都给讲完了,然而,SVG 能用到的还不止这些。开玩笑,Web 界的猪——浑身都是宝——可不是吹的。

澳门新萄京官方网站 27

首先,我们观察一下这个播放键的结构的实现方法(Codepen)(注:为了能直观地看到效果,我将 .play-icon-blend 的填充与描边改为了黑色,原例子中为白色):

XHTML

<svg class="play-icon-vector" x="0" y="0" width="50" height="50" viewBox="0 0 50 50"> <defs> <circle id="play-circle-template" cx="25" cy="25" r="25"></circle> </defs>   <use class="play-icon-blend" xlink:href="#play-circle-template" fill="#000" stroke="#000" stroke-width="4px"></use> <use class="play-icon-circle" xlink:href="#play-circle-template" fill="#fff" stroke="#fff" stroke-width="2px"></use> <path class="play-icon-polygon" d="M31.49,24.31a0.73,0.73,0,0,1,0,1.38l-8.27,5.64A0.74,0.74,0,0,1,22,30.64V19.36a0.74,0.74,0,0,1,1.22-.69Z" fill="#fff"></path> </svg>

1
2
3
4
5
6
7
8
9
<svg class="play-icon-vector" x="0" y="0" width="50" height="50" viewBox="0 0 50 50">
<defs>
<circle id="play-circle-template" cx="25" cy="25" r="25"></circle>
</defs>
 
<use class="play-icon-blend" xlink:href="#play-circle-template" fill="#000" stroke="#000" stroke-width="4px"></use>
<use class="play-icon-circle" xlink:href="#play-circle-template" fill="#fff" stroke="#fff" stroke-width="2px"></use>
<path class="play-icon-polygon" d="M31.49,24.31a0.73,0.73,0,0,1,0,1.38l-8.27,5.64A0.74,0.74,0,0,1,22,30.64V19.36a0.74,0.74,0,0,1,1.22-.69Z" fill="#fff"></path>
</svg>

CSS

.play-icon-vector { overflow: visible; } .play-icon-circle , .play-icon-polygon { mix-blend-mode: exclusion; transition: opacity .3s cubic-bezier(.08,.03,.22,.87); } .play-icon-blend { transform-origin: center; transform: scale(0); transition: transform .25s cubic-bezier(.08,.03,.22,.87); } .play-icon-vector:hover .play-icon-blend { transform: scale(1.1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.play-icon-vector {
overflow: visible;
}
.play-icon-circle ,
.play-icon-polygon {
mix-blend-mode: exclusion;
transition: opacity .3s cubic-bezier(.08,.03,.22,.87);
}
.play-icon-blend {
transform-origin: center;
transform: scale(0);
transition: transform .25s cubic-bezier(.08,.03,.22,.87);
}
.play-icon-vector:hover .play-icon-blend {
transform: scale(1.1);
}

这里顺带用了一下下 CSS3 的滤镜 mix-blend-mode(SVG 也有滤镜功能,这里不做介绍,感兴趣的可以移步《突袭 HTML5 之 SVG 2D 入门10 – 滤镜》)。这里用到的值 exclusion 的效果,是在叠加区域只显示亮色,下面是使用了同样滤镜的图片与正常图片的对比图,感受一下:

澳门新萄京官方网站 28

图片来源:CSS-Tricks-mix-blend-mode

可以看到代码里还出现了一些了不得的标签—— <defs><use>。接下来,我们就来了解一下它们。

首先我们知道,通过中间圆圈的缩放,再加上外围圆圈与中心三角的叠加效果,完成了这个 hover 效果。也就意味着,圆圈在这里用到两次。这个时候就可以使用 SVG 里路径的重用与引用功能。

svg sprites

     <rect x="710" y="150" width="40" height="40" ry="10" />

 

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>

SVG 的重用与引用

三种集合标签:<g><symbol><defs>,都是用于将零散的图形组合成一个整体。区别在于:

  • <g>:组合标签。添加 id 属性来作为引用的钩子,可在 <g> 标签上设置这组元素的相关属性(填色、描边等等)。
  • <symbol>:模板标签。与 <g> 标签一样,通过 id 进行引用。不同点在于,symbol 元素本身不会被渲染;symbol 元素拥有属性 viewBoxpreserveAspectRatio,这些允许 symbol 缩放图形。
  • <defs>:定义标签。不仅仅是图形对象的合集,还可以是渐变效果、蒙版、滤镜等等,设置好 id,在对应的属性(例如渐变就是 fill、蒙版就是 mask、滤镜就是 filter)中引用即可,引用格式为“url(#id)”。具体例子参看《SVG 研究之路 (18) – 再談 defs》。

更详细的区别见《突袭 HTML5 之 SVG 2D 入门7 – 重用与引用》。

以上三种集合的引用统一使用 <use> 标签。xlink:href 属性指定引用的 id

use 元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的 DOM 树中;这棵树的父节点是 use 元素。虽然是非公开的DOM节点,但是本质上还是 DOM 节点,所以被引用对象的所有属性值、动画、事件、 CSS 的相关设置等都会拷贝多来并都还是会起作用,而且这些节点也会继承 use 元素和 use 祖先的相关属性(注意引用元素是深拷贝,这些拷贝过来的元素与原来的元素已经无关系了,所以这里不会继承被引用元素祖先节点的属性),如果这些节点本身有相关(CSS)属性,还会覆盖继承来的属性,这些与普通的DOM节点是一致的,所以对use元素使用“visibility:hidden”时要小心,并不一定会起作用。但是由于这部分节点是非公开的,在 DOM 操作中,也只能看到 use 元素,所以也只能操作到 use 元素。

在 SVG Sprite 中,<use> 的使用比较猖狂(《拥抱 Web 设计新趋势:SVG Sprites 实践应用》,同时也提到了 SVG 的兼容情况),而当 SVG 图形代码与引用部分分离开时,想针对图形中的某一部分进行处理就会显得特别麻烦(只能看到 use 结点),这个时候,打开 shadow DOM 的显示,包你一览无余(具体操作方法见《神奇的 Shadow DOM》)。

澳门新萄京官方网站 29

打开了 shadow DOM 显示的 use 标签

下面就来看一个非图形引用的例子。在前面我们知道了,如果要描边动效,那修改 stroke-dashoffset 就可以达到效果。然而这种方法本身就是利用了虚线的 hack,如果我们想要做一个虚线的描线动效呢?比如:

澳门新萄京官方网站 30

这个时候 stroke-dasharraystroke-offset 的合作是无法完成的,因为他俩动起来本身就是虚线在移动。所以我们需要换个思路,描线动画还是那个描线动画,只是虚线的绘制需要使用另一个 hack —— 蒙版。

svg sprites类似于css sprites,将各个svg合并在一起。

</g>

澳门新萄京官方网站 31 

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>

蒙版

SVG 中的蒙版有两种——剪裁cliping <clipPath> 与遮罩mask <mask>,都需要在 <defs> 中定义,然后通过对应的属性进行引用。

XHTML

<svg> <defs> <!-- 剪裁的定义 --> <clipPath id="cliping">...</clipPath> <!-- 遮罩的定义 --> <mask id="mask">...</mask> </defs>   <!-- 剪裁的引用 --> <circle clip-path="url(#cliping)"></circle> <!-- 遮罩的引用 --> <circle clip-path="url(#mask)"></circle> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg>
<defs>
<!-- 剪裁的定义 -->
<clipPath id="cliping">...</clipPath>
<!-- 遮罩的定义 -->
<mask id="mask">...</mask>
</defs>
 
<!-- 剪裁的引用 -->
<circle clip-path="url(#cliping)"></circle>
<!-- 遮罩的引用 -->
<circle clip-path="url(#mask)"></circle>
</svg>

注:以上代码为了直观体现两者的使用方法,已剔除其余不相干代码,不可直接运行。

剪裁与遮罩的区别在于,剪裁是按照定义的形状界限分明地进行图像的展示与隐藏:

而遮罩相较于剪裁,多了渐变显示图像的功能,只要在 <mask> 中包裹渐变的定义即可。遮罩的展示策略是:

越黑越透明,越白越不透明,而遮色片(注:即遮罩)只有黑到白的灰階分布,所以如果作為遮色片的顏色是灰階以外的顏色,都會被轉換為灰階。——引用来源《SVG 研究之路 (9) – Clipping and Masking》

因此遮罩的功能其实是包含剪裁的,当遮罩使用的是纯黑的图像时,功能等同于剪裁。

澳门新萄京官方网站 32

虚线的描线动效结合剪裁或者遮罩即可以完成(Codepen):

XHTML

<svg width="300" height="100" viewBox="0 0 300 100"> <defs> <clipPath id="dash" class="dash"> <rect x="0" y="20" width="10" height="34"></rect> <rect x="20" y="20" width="10" height="34"></rect> <rect x="40" y="20" width="10" height="34"></rect> <rect x="60" y="20" width="10" height="34"></rect> <rect x="80" y="20" width="10" height="34"></rect> </clipPath> <mask id="mask-dash" class="mask_dash"> <rect x="0" y="20" width="10" height="34"></rect> <rect x="20" y="20" width="10" height="34"></rect> <rect x="40" y="20" width="10" height="34"></rect> <rect x="60" y="20" width="10" height="34"></rect> <rect x="80" y="20" width="10" height="34"></rect> </mask> </defs>   <g clip-path="url(#dash)"> <line class="line" x1="0" y1="28" x2="100" y2="28"></line> </g> <g mask="url(#mask-dash)"> <rect x="0" y="36" width="100" height="8" fill="#eee"></rect> <line class="line" x1="0" y1="40" x2="100" y2="40"></line> </g> </svg>

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
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<clipPath id="dash" class="dash">
<rect x="0" y="20" width="10" height="34"></rect>
<rect x="20" y="20" width="10" height="34"></rect>
<rect x="40" y="20" width="10" height="34"></rect>
<rect x="60" y="20" width="10" height="34"></rect>
<rect x="80" y="20" width="10" height="34"></rect>
</clipPath>
<mask id="mask-dash" class="mask_dash">
<rect x="0" y="20" width="10" height="34"></rect>
<rect x="20" y="20" width="10" height="34"></rect>
<rect x="40" y="20" width="10" height="34"></rect>
<rect x="60" y="20" width="10" height="34"></rect>
<rect x="80" y="20" width="10" height="34"></rect>
</mask>
</defs>
 
<g clip-path="url(#dash)">
<line class="line" x1="0" y1="28" x2="100" y2="28"></line>
</g>
<g mask="url(#mask-dash)">
<rect x="0" y="36" width="100" height="8" fill="#eee"></rect>
<line class="line" x1="0" y1="40" x2="100" y2="40"></line>
</g>
</svg>

CSS

.mask_dash rect{ fill: #fff; } .line { stroke: #000; stroke-width: 8px; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset ease-in .5s; } svg:hover .line { stroke-dashoffset: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.mask_dash rect{
fill: #fff;
}
.line {
stroke: #000;
stroke-width: 8px;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset ease-in .5s;
}
svg:hover .line {
stroke-dashoffset: 0;
}

注意到上方使用了遮罩的集合里多了一个方形图像,是因为遮罩对于图形尺寸的要求更加严苛,line 在它的眼里不是东西,不提供任何效果支持,但是一旦加个方形垫背,line 就被接受了[翻白眼]。所以涉及到切割的蒙版,请尽量使用 clipPath

最主要的优点就是能减少页面的加载时间,优化开发流程,以及保持页面中图片元素的一致性。

 

从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同,当然这个参数对正圆来说没有影响。
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.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>的宽度和长度是实际的像素值。然后,指定这个模式去填充下面的矩形。

总结

写到这里,阿婆主气数已尽,SVG 是个深坑,这里也只能借着三个例子扯扯若干特性,等下回心情好了,阿婆主再拎几个出来说说(也是任性,人的 SVG 笔记都是一个属性一篇的)。下面我们来给这篇凌乱的文章做个梳理:

  • 今天我们实现了三个动效——
    • 箭头描线动效
    • 播放按钮滤镜动效
    • 虚线描线动效
  • 动效来源于 WLS-Adobe
  • 聊到了 SVG 的几个标签
    • <path>
    • <g>
    • <symbol>
    • <defs>
    • <use>
    • <clipPath>
    • <mask>
  • 以及属性
    • viewBox
    • preserveAspectRatio
    • fill
    • stroke
    • stroke-dasharray
    • stroke-dashoffset
    • d
    • clip-path
    • mask
  • 动效实现对应的关键点
    • 箭头——stroke-dasharraystroke-dashoffset
    • 播放按钮——<defs><use>
    • 虚线——<clipPath><mask>clip-pathmaskstroke-dasharraystroke-dashoffset

文中引用到的资料(前方高能预警):

  • 《突袭 HTML5 之 SVG 2D 入门》,沙场秋点兵
    • 2.图形绘制
    • 4.笔画与填充
    • 6.坐标与变换
    • 7.重用与引用
    • 9.蒙板
    • 10.滤镜
  • 《SVG 研究之路》,Oxxo Studio
    • 9.Clipping and Masking
    • 16.Stroke-miterlimit
    • 18.再談 defs
    • 23.理解 viewport 與 viewbox
  • SVG Tutorial,MDN
    • Positions
    • Fills and Strokes
    • Path
  • 贝塞尔曲线,维基百科
  • mix-blend-mode,Robin Rendle,CSS-Tricks
  • 《拥抱 Web 设计新趋势:SVG Sprites 实践应用》,高大师,凹凸实验室
  • 《神奇的 Shadow DOM》,暖暖,凹凸实验室

    1 赞 6 收藏 1 评论

澳门新萄京官方网站 33

实践中我们可以把整块的svg放在head头部, 因此可以在一处地方更新svg即可,而不是让svg的代码块散落在文档的各个地方。

a链:

  这个HTML绘制了下面的几幅图:

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属性表示图像的来源。

<head>

<a xlink:href="" target="_blank">

 

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

<meta charset=”utf-8″ />

      <text x="10" y="130" style="fill: red;">Hello World!!</text>

澳门新萄京官方网站 34 

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属性值有三个数字,第一个数字是角度值,第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时,角度为0,围绕(200, 200)开始旋转;to="360 400 400"表示结束时,角度为360,围绕(400, 400)旋转。

<title>svg</title>

</a>

 从上面可以看出,这几个参数其实是唯一确定一段圆弧需要的参数。这里也看到,SVG中的圆弧比canvas中的复杂一些。

三、JavaScript 操作

<svg version=”1.1″ xmlns=” xmlns:xlink=” width=”32″ height=”158″ viewBox=”0 0 32 158″>

 

绘制三次贝塞尔曲线指令:C  x1 y1, x2 y2, x y          
  三次贝塞尔曲线有两个控制点,就是(x1,y1)和(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.1 DOM 操作

如果 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属性。

<!– SVG等省略  –>

路径标签:(M——移动 L——线段 H——水平线段  V——垂直线段  A——圆弧  C——三次贝塞尔曲线   S——特殊版本的三次贝塞尔曲线   Q——二次贝塞尔曲线    T——特殊版本的二次贝塞尔曲线   Z——闭合)

  这个HTML片段绘制了下面的图形:

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。

</svg>

<path d="M 60 0 L 120 0 L 180 60 L180 120 L120 180 L 60 180 L 0 120 L 0 60" transform="translate(500,500)"></path>

  
   澳门新萄京官方网站 35

3.3 读取 SVG 源码

由于 SVG 文件就是一段 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'));

</head>

 

 

3.4 SVG 图像转为 Canvas 图像

首先,需要新建一个Image对象,将 SVG 图像指定到该Image对象的src属性。

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嵌入页面的方式:img、background、iframe、embed、object、直接使用svg标签嵌入

从上面我们可以看到,控制点控制了曲线的弧度。
 
特殊版本的三次贝塞尔曲线:S  x2 y2, x y
  很多时候,为了绘制平滑的曲线,需要多次连续绘制曲线。这个时候,为了平滑过渡,常常第二个曲线的控制点是第一个曲线控制点在曲线另外一边的映射点。这个时候可以使用这个简化版本。这里要注意的是,如果S指令前面没有其他的S指令或C指令,这个时候会认为两个控制点是一样的,退化成二次贝塞尔曲线的样子;如果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>

四、实例:折线图

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

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>

SVG形状

 

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

五、参考链接

  • 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 赞 收藏 评论

澳门新萄京官方网站 36

矩形 <rect>

svg生成工具软件:Adobe Illustrator、SVGDeveloper

 

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

 

澳门新萄京官方网站 37 

解释:x为x坐标,y为y坐标;width 和 height 分别为形状的高度和宽度;rx 和 ry 属性可使矩形产生圆角。

path的两个css属性:

上面的S指令只有第二个控制点,第一个控制点采用了前面的曲线指令的第二个控制点的一个映射点。

属性: fill 属性定义形状的填充颜色

stroke-dasharray     /*两个参数:线段长度 线段缝隙*/

绘制二次贝塞尔曲线指令:Q  x1 y1, x y , T x y  (特殊版本的二次贝塞尔曲线)
  二次贝塞尔曲线只有一个控制点(x1,y1),通常如下图所示:

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

stroke-dashoffset  /*从哪个位置开始渲染线段*/

 

stroke-width 属性定义形状边框的宽度

 

澳门新萄京官方网站 38 

圆形 <circle>

获取path长度的js api:  getTotalLength方法

如果是连续的绘制曲线,同样可以使用简化版本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”/>

 

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

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

通过改变path的两个属性,实现一个动画的效果:

 

椭圆<ellipse>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>路径描边动画2</title>
    <style>
        path:first-child{
            stroke-dasharray: 1089.82;/*两个参数:线段长度 线段缝隙*/
            stroke-dashoffset: 1089.82; /*从哪个位置开始渲染线段*/
        }
        path:last-child{
            stroke-dasharray: 1288.02;
            stroke-dashoffset: 1288.02;
        }
        path{
            animation: dash 5s linear infinite;
        }
        @keyframes dash {
            to{
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M 58 88 C 60.99994 87.33333 71.5 84.66666 76 84 C 80.49994 83.33333 82.16663 84.16666 85 84 C 87.83331 83.83333 89 80.16666 93 83 C 96.99994 85.83333 105.6666 92.83333 109 101 C 112.3333 109.1667 116.9999 124.8333 113 132 C 109 139.1667 93.66663 138.6667 85 144 C 76.33331 149.3333 61.99994 160.5 61 164 C 60 167.5 72.16663 165.6667 79 165 C 85.83331 164.3333 94.66663 156.3333 102 160 C 109.3333 163.6667 121.1666 175.6667 123 187 C 124.8333 198.3333 118.6666 216.1667 113 228 C 107.3333 239.8333 92.33331 253.8333 89 258 C 85.66663 262.1667 94.99994 257.3333 93 253 C 91 248.6667 81.83331 239.3333 77 232 C 72.16663 224.6667 55.66663 222.5 64 209 C 72.33331 195.5 103.8333 164 127 151 C 150.1666 138 193.1666 138.6667 203 131 C 212.8333 123.3333 191.9999 112.6667 186 105 C 180 97.33333 171.3333 75.83333 167 85 C 162.6666 94.16666 163.4999 133.8333 160 160 C 156.5 186.1667 144.8333 238.3333 146 242 C 147.1666 245.6667 159.5 199.3333 167 182 C 174.4999 164.6667 189.1666 146.8333 191 138 C 192.8333 129.1667 182.6666 130.5 178 129 C 173.3333 127.5 158.1666 118.8333 163 129 C 167.8333 139.1667 187.6666 171.6667 207 190 C 226.3333 208.3333 267 230.8333 279 239 " fill="#FFFFFF" stroke="#000000"  />
        <path d="M 430 64 C 432.4999 67.33333 440 76.83333 445 84 C 449.9999 91.16666 464.9999 101.6667 460 107 C 455 112.3333 430.4999 113.6667 415 116 C 399.5 118.3333 373.3333 120.1667 367 121 C 360.6666 121.8333 361.6666 123 377 121 C 392.3333 119 432.3333 113.8333 459 109 C 485.6666 104.1667 529.6666 92.49998 537 92 C 544.3333 91.5 514.4999 99.16666 503 106 C 491.5 112.8333 473.8333 124.3333 468 133 C 462.1666 141.6667 466.8333 156.3333 468 158 C 469.1666 159.6667 474.5 146.5 475 143 C 475.4999 139.5 477.8333 135.8333 471 137 C 464.1666 138.1667 446.8333 142.5 434 150 C 421.1666 157.5 400.4999 173.1667 394 182 C 387.5 190.8333 394.6666 196.6667 395 203 C 395.3333 209.3333 396.6666 212 396 220 C 395.3333 228 392.6666 246.5 391 251 C 389.3333 255.5 379.5 257.5 386 247 C 392.4999 236.5 402.3333 202.1667 430 188 C 457.6666 173.8333 541 164.1667 552 162 C 562.9999 159.8333 511.1666 171.3333 496 175 C 480.8333 178.6667 466.8333 177.3333 461 184 C 455.1666 190.6667 462.3333 205.3333 461 215 C 459.6666 224.6667 454.6666 238.8333 453 242 C 451.3333 245.1667 448.6666 240.5 451 234 C 453.3333 227.5 458.5 212.3333 467 203 C 475.4999 193.6667 493.6666 177 502 178 C 510.3333 179 512.6666 197.8333 517 209 C 521.3333 220.1667 520 242.5 528 245 C 535.9999 247.5 552.1666 232 565 224 C 577.8333 216 600.1666 206 605 197 C 609.8333 188 595.8333 174.5 594 170 " fill="#FFFFFF" stroke="#000000" />
    </svg>

    <script>
        var paths = document.querySelectorAll('path'),path0=paths[0],path1=paths[1];
        var path0Len=path0.getTotalLength(),path1Len=path1.getTotalLength();
        console.log(path0Len ';' path1Len)
    </script>
</body>
</html>

澳门新萄京官方网站 39 

<ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″ style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2″/>

 

 

解释:cx 圆点的 x 坐标,cy 圆点的 y 坐标;rx 水平半径,ry 垂直半径。

同样的,如果T指令前面不是Q或者T指令,则认为无控制点,画出来的是直线。

线<line>

相对坐标绘制指令
  与绝对坐标绘制指令的字母是一样的,只不过全部是小写表示。这组指令的参数中涉及坐标的参数代表的是相对坐标,意思就是参数代表的是从当前点到目标点的偏移量,正数就代表向轴正向偏移,负数代表向反向偏移。不过对Z指令来说,大小写没有区别。

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

  这里要注意,绝对坐标指令与相对坐标指令是可以混合使用的。有时混合使用可以带来更灵活的画法。

解释:(x1,y1)为线条的开始坐标;(x2,y2)为线条的结束坐标。

 

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

 

解释:points 属性定义多边形每个角的 x 和 y 坐标。为了可读性,建议x与y坐标用逗号分开,每个角之间的坐标用空格分开。

摘自  沙场秋点兵  

多边形<polygon>

SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了。废话不说了,直接看例子,这个最直接: svg width=200...

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

解释:points 属性定义多边形每个角的 x 和 y 坐标。

路径<path>

直线指令:

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

Z = closepath

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

<svg>

<path d=”M250 150 L150 350 L350 350 Z” />

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

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站图像入门教程,svg学习笔记

关键词: