菜单

3个例子上手 SVG 动画

2019年4月21日 - 皇家前端

2个例子上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

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

CSS三动画已丰盛强劲,但是依然有一部分它做不到的地点。合营SVG,让Web动作效果有更多的可能。此番要做的成效是一个loading动画(如图):个中旋转通过CSS来成功,但是旋转之后圆弧减少变成笑脸的嘴巴要求借助SVG来兑现。

图片 1

用CSS和SVG制作饼图

2015/08/10 · CSS ·
SVG

原稿出处: Lea
Verou   译文出处:lulux的博客   

在论及到CSS本事时,没有人会比Lea
Verou更执着、不过又丰硕聪明,努力去找出难点的各样解决方案。近日,Lea自身创作、设计和出版了一本书——CSS
Secrets,那本书这个有趣,包含部分CSS小技艺以及缓慢解决周边难题的手艺。借使你以为本身的CSS技巧还不易,看看那本书,你会吃惊的。在那篇文章中,我们公布了书里的片段片段,那也被宣布在Lea方今在SmashingConf
New
York的发言内容中——用CSS设计轻易的饼图。注意,因为浏览器的支撑有限,有个别demo或然或无法健康运转。——编辑

饼图,固然是最简易的唯有二种颜色的款式,用Web技巧创立也并不轻巧,就算都是有些左近的消息内容,从简单的总括到进度条款标还有定时器。平常是应用外部图像编辑器来分别为多个值创立八个图像来达成,或是使用大型的JavaScript框架来规划更复杂的图片。

固然那些东西并不像它早已看起来那么难以完结,不过也尚无什么直接并且轻巧的方式。但是,以后已经有不少越来越好、更易于维护的办法来贯彻它。

SVG 图像入门教程

2018/08/07 · HTML5 ·
SVG

原稿出处: 阮一峰   

三看 SVG Web 动效

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

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

图片 2

CSS叁 动作效果玩腻了呢?不妨的,大家还有 SVG。

Welikesmall
是贰个网络品牌宣传代理,那是自己见过的最喜爱使用 SVG
做动作效果的网页设计团队。事实上,越多的网页动作效果达人选取在 SVG
的疆土上开垦动作效果的土壤,纵然 SMIL 寿将终寝,事实上这反而将 SVG
动作效果推向了一个新的世界:CSS三 Animation + SVG。

图片 3

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

还记得本人在漫漫的《以影片之登时 CSS3动画》中说道:“CSS3动画简直具有了全方位社会风气!”那么带上 SVG 的 CSS三动画则已突破天际向着宇宙级的只怕性前进(认为给本人挖了二个极致伟大的坑,网页动画界可不敢再出新技术了[扶额])。

CSS 与 SVG 的开挖无疑将 html 代码的可读性又推上2个台阶,大家得以由此CSS 调节 SVG
图形的尺码、填色、边框色、过渡、移动变幻等一定实用的各个质量,除了那些之外,将图片分解的动画在这种原则下也变得一定轻巧。

Step1、声明SVG视口

XHTML

<svg width=”100″ height=“100”></svg>

1
<svg width="100" height=“100”></svg>

内定一个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也足以应用其它的官方单位,举例cm、mm、em等

读书器会设置3个默许的坐标连串,见图:左上角为原点,个中国水力电力对民有集团业平(x)坐标向右递增,垂直(y)坐标向下递增。

图片 4

在尚未点名的情状下,全体的的数值暗中认可单位都以像素。

基于转变的解决方案


其壹方案从HTML的角度来讲是最佳的:它只供给三个成分,别的的都足以用伪成分、调换和CSS渐变完结。我们从上面那么些简单的要素开头:

<div class=”pie”></div>

1
<div class="pie"></div>

明天,即使大家目的在于展现二个 五分之一 比例的饼图。灵活性的主题材料我们后边再化解。大家先给元素增多样式,让它成为三个圆,也便是我们的背景:

图片 5

图一:第2步是先画一个圆(大概能够说是显示0%比例的饼图)

CSS

.pie { width: 100px; height: 100px; border-radius: 50%; background:
yellowgreen; }

1
2
3
4
5
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
}

 

咱俩的饼图是蓝紫(特指 yellowgreen )和辣椒红( #655 )展现的比例。大概会在比例部分尝试使用
transform 中的 skew ,但是通过三回考试之后评释,那是贰个百般混乱的方案。因而,大家用那两种颜色为这么些饼图的左右有个别各自着色,然后对于我们想要的比例,使用旋转的伪元平素促成。

大家选用3个粗略的线性渐变,给右半部分着黄绿:

CSS

background-image: linear-gradient(to right, transparent 50%, #655 0);

1
background-image: linear-gradient(to right, transparent 50%, #655 0);

图片 6

图贰:用3个简约的线性渐变给右半圆着草绿

如图二所示,那样就到位了。现在,大家可以承继为伪成分增多样式,让它产生2个蒙版:

CSS

.pie::before { content: ”; display: block; margin-left: 50%; height:
100%; }

1
2
3
4
5
6
.pie::before {
  content: ”;
  display: block;
  margin-left: 50%;
  height: 100%;
}

图片 7

图3:虚线内的剧情表示伪成分将用作蒙版的区域

您可以在图3中看出咱们的伪成分当前定位相对于大家的pie成分。目前,它还没有增进样式,也不曾遮盖任胡力夫西,只是2个晶莹剔透的矩形。在起来增添样式以前,大家先来分析一下:

综合,伪成分的CSS样式如下:

CSS

.pie::before { content: ”; display: block; margin-left: 50%; height:
100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit;
transform-origin: left; }

1
2
3
4
5
6
7
8
9
.pie::before {
  content: ”;
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

图片 8

图4:增加体制之后的伪成分(这里用虚线表示)

专注:不要选用 class=”crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco”
style=”font-size: 1三px !important; line-height: 15px !important;font-size: 13px !important;”> class=”crayon-pre crayon-code”
style=”font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;”> class=”crayon-e”>background class=”crayon-sy”>: class=”crayon-i”>inherit class=”crayon-sy”>; ,要用 id=”crayon-5b8f6c8720464547585400″
class=”crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco”
style=”font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;”> class=”crayon-pre crayon-code”
style=”font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;”> class=”crayon-e”>background-color class=”crayon-sy”>: class=”crayon-i”>inherit ;,不然父成分背景图像上的渐变也会被持续

大家的饼图近日如图肆所示。今后始于风趣起来了!大家能够开端旋转伪元素,给它利用叁个rotate() 调换。要呈现 百分之二十 的比例,我们能够给它2个 7二deg ( 0.贰 x 360 = 7贰 ),或 .2turn ,那么些可读性更加好。你能够在图5中见到差别旋转角度值的结果。

图片 9

图五:分别展现不一样期比较例的饼图,从左到右: 一成  ( 3六deg 或 .1turn ), 百分之二十  ( 7贰deg 或  .贰turn ), 五分之二  ( 144deg  或 .四turn )

您只怕会想大家已经成功了,不过它可没这么轻便。大家的饼图在呈现050%的深浅的始末时是不曾其余问题的,可是倘诺大家要描写八个十分之六 的转动(通过运用 .6turn ),就会生出如图陆的图景。不过,别忧虑,大家能够消除这么些业务!

图片 10

图6:对于大多数的百分比,大家的饼图就跪了orz(这里的是3/5)

借使大家把 2/4-百分百 比例的动静作为独立的多个难点,大概会专注到能够利用以前的消除方案的反相版本:从0.5turn旋转的红桔黄伪成分。所以,对于三个60%的饼图,伪成分的CSS代码如下:

CSS

.pie::before { content: ”; display: block; margin-left: 50%; height:
100%; border-radius: 0 100% 100% 0 / 50%; background: #655;
transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
.pie::before {
  content: ”;
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

图片 11

图柒: 伍分叁 饼图的准确展开药格局~

你能够在图七中见到结果。因为我们早就制定了三个能够描绘出任何百分比的措施,我们居然足感觉饼图从0%100%增多动画效用,创设出一个有意思的进程条:

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg {
50% { background: #655; } } .pie::before { content: ”; display: block;
margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%;
background-color: inherit; transform-origin: left; animation: spin 3s
linear infinite, bg 6s step-end infinite; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: ”;
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite,
             bg 6s step-end infinite;
}

 

See the Pen zGbNLJ by Airen
(@airen) on CodePen.

来得符合规律,不过大家假诺给八个差异期相比较例的静态饼图加多样式呢,最普及的用例是?在能够图景下,大家希望能够简简单单地输入如下的内容:

<div class=”pie”>20%</div> <div
class=”pie”>60%</div>

1
2
<div class="pie">20%</div>
<div class="pie">60%</div>

下一场就可以收获四个饼图,二个意味20%,八个意味60%。首先,大家先研讨一下什么样使用内联样式来产生,然后大家得以写3个简短的剧本来分析文本内容,对应地丰裕内联样式,而且要代码优雅、封装、可维护性,还有最要害的某个,可访问性。

使用内联样式调节饼图百分比的2个困苦是:用于安装百分比CSS代码是用伪成分实现的。而且你也知晓,大家不能够给伪成分设置内联样式,所以我们供给更新。

留意:尽管你想要使用的值是在某些不须要通过再一次的复杂的猜想的范围内的场馆,你能够动用同一的才具,包括透过它们一步一步调节和测试动画的图景。看该手艺的贰个粗略的演示。

 

See the Pen YXgNOK by Airen
(@airen) on CodePen.

缓和方案来自最不容许的地点之1。我们就要选用大家曾经介绍过的动画,不过它是刹车状态的。我们不会让它像三个例行的卡通片那样运维,大家将使用负延迟来让它可以静态地暂停在某些点。很奇异?1个负的animation-delay的值不仅在正规中是同意的,在看似那样的案例中也是非凡好用:

负延迟是卓有成效的。和0s的推移类似,它表示动画将即时试行,可是是依赖延迟的相对值来自动运行的,所以一旦动画已经在钦定的日子在此之前就伊始运维了,那它就会间接从active的光阴中途运维。
—CSS Animations Level
1

因为我们的卡通是刹车的,它的率先帧正是大家唯一体现的那壹帧(通过大家的animation-delay概念)。饼图上海展览中心示的比重将会是大家的animation-delay的总时间。比如,当前的持续时间是6s,我们的
animation-delay 值为-1.2s则显示20%的百分比。为了简化计算,大家设置二个100s的持续时间。记住因为我们的动画片是永世暂停的,大家给它钦命的延迟大小并不会有何样影响。

再有最终2个难点:动画是赋给伪成分的,可是大家想要给.pie要素设置内联样式。因为<div>上从不动画,大家得以给它设置animation-delay用作内联样式,然后给伪成分应用
animation-delay: inherit; 。综上所述,20%60%的饼图的HTML代码如下:

<div class=”pie” style=”animation-delay: -20s”></div>
<div class=”pie” style=”animation-delay: -60s”></div>

1
2
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>

习感觉常建议的那几个动画的CSS代码如下(省略 .pie 规则,因为从没改变):

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg {
50% { background: #655; } } .pie::before { /* [Rest of styling stays
the same] */ animation: spin 50s linear infinite, bg 100s step-end
infinite; animation-play-state: paused; animation-delay: inherit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  /* [Rest of styling stays the same] */
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

那会儿,能够把HTML标签改成接Nabi例作为内容,和壹开始期待的同样,然后经过二个简练的脚本为其添加animation-delay 内联样式。

JavaScript

$$(‘.pie’).forEach(function(pie) { var p = parseFloat(pie.textContent);
pie.style.animationDelay = ‘-‘ + p + ‘s’; });

1
2
3
4
$$(‘.pie’).forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  pie.style.animationDelay = ‘-‘ + p + ‘s’;
});

图片 12

图捌:没有隐藏文本前的图

末尾的代码如下:

CSS

.pie { position: relative; width: 100px; line-height: 100px;
border-radius: 50%; background: yellowgreen; background-image:
linear-gradient(to right, transparent 50%, #655 0); color: transparent;
text-align: center; } @keyframes spin { to { transform: rotate(.5turn);
} } @keyframes bg { 50% { background: #655; } } .pie::before { content:
”; position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%; background-color: inherit;
transform-origin: left; animation: spin 50s linear infinite, bg 100s
step-end infinite; animation-play-state: paused; animation-delay:
inherit; }

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
.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}
 
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: ”;
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

 

See the Pen qdvRMv by Airen
(@airen) on CodePen.

一、概述

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

图片 13

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
代码也足以写在2个独门文件中,然后用<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 UTiggoI 写入网页。

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

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

索引

正文将讲到三个动作效果例子:

动作效果来源:WLS-Adobe

将在聊到的 SVG 标签:

以及品质:

Step二、绘制购物袋

购物袋由两个部分组成,先画下面的主体:

XHTML

<path d=”M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10
10 90 0 1 20 90″ style=”fill: #e9e8ee;” />

1
<path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />

其余形状都得以选用路径元素画出,描述概略的多寡放在它的d属性中。
a.样式中的fill用来设置填充色。
b.路线数据由命令和坐标构成:

指令 说明
M 20 40 表示移动画笔到(20,40)
L 80 40 表示绘制一条线到(80, 40)
A 10 10 90 0 1 70 100 绘制一个椭圆弧

圆弧命令以字母A初阶,前边紧跟着九个参数,那捌个参数分别用来表示:

  • 椭圆的x半径和y半径
  • 椭圆的x轴旋转角度
  • 圆弧的角度小于180度,为0;大于或等于180度,则为壹
  • 以负角度绘制为0,不然为1
  • 终点的x、y坐标

图片 14

接下来绘制购物袋上面的部分

XHTML

<path d=”M 35 40 A 15 15 180 1 1 65 40″ style=”fill: none; stroke:
#e9e8ee; stroke-width: 5;” />

1
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />

地方的片段是叁个半圆弧,作者一样用路线来画出,也能够行使基础形状来成功。

体制中的stokestroke-width个别用来安装描边色和描边的幅度。

图片 15

依照SVG的消除方案


SVG使得许多图片专门的学业变得尤为简明,饼图也不例外。但是,用path路子制造饼图,必要复杂的数学总计,我们得以选拔一些小技巧来代替。

笔者们从贰个圆开始:

<svg width=”100″ height=”100″> <circle r=”30″ cx=”50″ cy=”50″
/> </svg>

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

方今,给它利用有的基础的体制:

CSS

circle { fill: yellowgreen; stroke: #655; stroke-width: 30; }

1
2
3
4
5
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 30;
}

留神:你大概清楚,那么些CSS属性也能够看做SVG元素的习性使用,倘若把可移植性思量在内的话这可能挺方便的。

图片 16

图玖:从1个木色的SVG圆形,带3个胖胖的#655描边开头

您能够在图九中观察大家绘制的加了描边的圆。SVG描边不止有strokestroke-width天性。还有不少不是专程流行的描边相关的品质能够用来对描边实行微调。当中三个是stroke-dasharray,用于创立虚线描边。比如,大家能够选用如下:

CSS

stroke-dasharray: 20 10;

1
stroke-dasharray: 20 10;

图片 17

图十:3个粗略的虚线描边,通过stroke-dasharray品质创造

那行代码的意趣是大家的虚线是20的尺寸加上10的边距,如图10所示。在此地,你也许会惊叹这么些SVG描边属性和饼图毕竟有何样关系啊。假如大家给描边应用多个值为0的虚线宽度,和1个不止或等于大家脚下圆的周长的边距,它恐怕就清楚一些了(总结周长:
C = 二πr , 所以在此间  C = 2π × 30 ≈ 18玖 ):

CSS

stroke-dasharray: 0 189;

1
stroke-dasharray: 0 189;

图片 18

图11:不同stroke-dasharray值对应的功力;从左到右: 0 18玖; 40 18玖; 玖伍 189; 150 18玖 

如图1第11中学的第②个圆所示,它的描边的都被移除了,只剩余2个草绿的圆。不过,当大家开端增大第二个值的时候,逸事务发生了(图11):因为边距太长,大家就从没有过虚线描边了,唯有2个描边覆盖了笔者们钦赐的圆的周长的比例。

你只怕已经起来弄通晓了那是怎么回事:假如我们把圆的半径减小到一定水准,它或然就会完全被它的描边覆盖,最后获得的是三个老大接近于饼图的东西。比方,你能够在图1第22中学观看:当给圆应用1个25的半径和三个50stroke-width,像上面包车型客车职能:

图片 19

图1贰:我们的SVG图像开头像三个饼图了O(∩_∩)O

牢记:SVG描边总是相对于成分边缘2/四在内八分之四在外的(居中的)。今后应有能够控制那壹行为。

<svg width=”100″ height=”100″> <circle r=”25″ cx=”50″ cy=”50″
/> </svg> circle { fill: yellowgreen; stroke: #655;
stroke-width: 50; stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */ }

1
2
3
4
5
6
7
8
9
10
<svg width="100" height="100">
  <circle r="25" cx="50" cy="50" />
</svg>
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 50;
  stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */
}

前几日,把它产生我们在上三个化解方案中创建的饼图的标准是10分轻易的:大家只供给在描边上面增加三个更加大的朱红圆形,然后逆时针旋转90°,那样它的起点就在顶部中间。因为<svg>要素也是HTML成分,我们能够给它丰裕样式:

CSS

svg { transform: rotate(-90deg); background: yellowgreen; border-radius:
50%; }

1
2
3
4
5
svg {
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}

图片 20

图13:最后的SVG饼图

您能够在图壹三中看出最终结出。那种才具能够让饼图更易于达成从0%100%转换的卡通。我们只必要创建三个CSS动画,让stroke-dasharray
0 158 变成 158 158 :

CSS

@keyframes fillup { to { stroke-dasharray: 158 158; } } circle { fill:
yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 0 158;
animation: fillup 5s linear infinite; }

1
2
3
4
5
6
7
8
9
10
11
@keyframes fillup {
  to { stroke-dasharray: 158 158; }
}
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 50;
  stroke-dasharray: 0 158;
  animation: fillup 5s linear infinite;
}

作为贰个附加的改良,大家得以在圆上内定3个特定半径,使其周长Infiniti接近100,那样我们得以用百分比内定stroke-dasharray的长短,而不须求做总结。因为周长是2πr,大家的半径则是100 ÷ 2π ≈ 15.915494309,约等于16。我们还足以用viewBox特点钦定SVG的尺码,能够让它自动调解为容器的轻重,不要接纳widthheight属性。

经过以上调度,图一三的饼图的HTML标签如下:

<svg viewBox=”0 0 32 32″> <circle r=”16″ cx=”16″ cy=”16″ />
</svg>

1
2
3
<svg viewBox="0 0 32 32">
  <circle r="16" cx="16" cy="16" />
</svg>

CSS如下:

CSS

svg { width: 100px; height: 100px; transform: rotate(-90deg);
background: yellowgreen; border-radius: 50%; } circle { fill:
yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 38 100;
/* for 38% */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
svg {
  width: 100px; height: 100px;
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 32;
  stroke-dasharray: 38 100; /* for 38% */
}

小心现行反革命比例已经能够很方便地转移了。当然,即便已经简化了标签,大家如故不想在绘制每一个饼图的时候都重复二回全体这几个SVG标签。那是时候拿出JavaScript来帮大家1把了。大家写2个轻便的剧本,让大家的HTML标签直接省略地那样写:

<div class=”pie”>20%</div> <div
class=”pie”>60%</div>

1
2
<div class="pie">20%</div>
<div class="pie">60%</div>

接下来在各类.pie要素里边加多二个内联SVG,包罗具有必要的成分和总体性。它还会加多贰个<title>要素,为了充实可访问性,那样显示屏阅读器用户还足以知道当前的饼图表示的比例。最终的本子如下:

JavaScript

$$(‘.pie’).forEach(function(pie) { var p = parseFloat(pie.textContent);
var NS = “”; var svg =
document.createElementNS(NS, “svg”); var circle =
document.createElementNS(NS, “circle”); var title =
document.createElementNS(NS, “title”); circle.setAttribute(“r”, 16);
circle.setAttribute(“cx”, 16); circle.setAttribute(“cy”, 16);
circle.setAttribute(“stroke-dasharray”, p + ” 100″);
svg.setAttribute(“viewBox”, “0 0 32 32″); title.textContent =
pie.textContent; pie.textContent = ”; svg.appendChild(title);
svg.appendChild(circle); pie.appendChild(svg); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$$(‘.pie’).forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  var circle = document.createElementNS(NS, "circle");
  var title = document.createElementNS(NS, "title");
  circle.setAttribute("r", 16);
  circle.setAttribute("cx", 16);
  circle.setAttribute("cy", 16);
  circle.setAttribute("stroke-dasharray", p + " 100");
  svg.setAttribute("viewBox", "0 0 32 32");
  title.textContent = pie.textContent;
  pie.textContent = ”;
  svg.appendChild(title);
  svg.appendChild(circle);
  pie.appendChild(svg);
});

就是它了!你只怕会以为CSS方法相比好,因为它的代码比较简单而且更可信。可是,SVG方法比较纯CSS方案照旧有必然的优势的:

See the Pen oXVBar by Airen
(@airen) on CodePen.

二、语法

从二个大约的事例谈到

图片 21

要做出这么的效用,第壹步是将图纸画出来。徒手敲代码那种事照旧留给图形工具来做,不过,为了更好地操纵与营造动作效果,咱至少要到位读懂
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 轴垂直向下。

图片 22

(图片来源于: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 尺寸同样、放大1倍、减弱壹倍时的显现:

图片 23

图片 24

图片 25

一句话计算,正是用户坐标系要求以某种格局铺满全数视窗。私下认可的主意是以最短边为准铺满,也正是接近
background-size 中的 cover 值。通过 preserveAspectRatio
属性你可以调控用户坐标系的拓展格局与职责,完美满足你的各样急需。

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

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

在意一个参数之间供给运用空格隔离。

defer:可选参数,只对 image 成分有效,如若 image 元素中
preserveAspectRatio 属性的值以 defer 开端,则意味 image
成分使用引用图片的缩放比例,假如被引用的图片并未有缩放比例,则忽略
defer。全数别的的成分都忽视那些字符串。

meetOrSlice:可选参数,能够去下列值:

  • meet – 默许值,统1缩放图形,让图形全体来得在 viewport 中。
  • slice – 统1缩放图形,让图形充满 viewport,超越的局地被剪开除。

——引用来源《突袭 HTML伍 之 SVG ②D 入门6 –
坐标与转变》

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

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

图片 26

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

——引用来源《SVG 商讨之路 (23) – 通晓 viewport 與
viewbox》

下图讲明了各样填充的功能:

图片 27

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

在那壹层面管理好图形的呈现之后,剩下的具有调换,无论是 translate、rotate
照旧 opacity,大家都得以全权交给 CSS
来管理,并且能够将图片细化到造型只怕路线的框框开展转变。

而是实际上情形是,刚才的那段代码,放进codepen之后是如何也看不见的,原因就在于那么些渠道的绘图既未有填写颜色也从没描边。

Step三、绘制眼睛

XHTML

<circle cx=“40″ cy=”60″ r=”2.5″ style=”fill: #fff;” /> <circle
cx=”60″ cy=”60″ r=”2.5″ style=”fill: #fff;” />

1
2
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />

选择基础形状,画三个个小圆点。八个脾性分别是岗位坐标、半径和填充颜色。
图片 28

连锁能源


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
拾0像素高,viewBox属性钦点视口从(50, 50)本条点起来。所以,实际看到的是右下角的1/4圆。

注意,视口必须适配所在的上空。上边代码中,视口的尺寸是 50 x 50,由于 SVG
图像的深浅是 拾0 x 100,所以视口会推广去适配 SVG
图像的高低,即加大了四倍。

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

填充——fill

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

CSS

svg line { fill: #000; /* 填充本白 */ }

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

填充色的发光度通过 fill-opacity 设置。

fill-rule 用于安装填充方式,算法较为抽象,除了 inherit
那几个取值,还可取以下二种值:

nonzero:那些值采取的算法是:从必要剖断的点向大四方向发射线,然后总计图形与线条交点的处的走向;总结结果从0先河,每有三个交点处的线条是从左到右的,就加一;每有1个交点处的线条是从右到左的,就减一;那样测算完全体交点后,假如这一个总结的结果不等于0,则该点在图片内,需求填写;即便该值等于0,则在图纸外,不要求填写。看下边包车型地铁以身作则:

图片 29

evenodd:那个值选拔的算法是:从供给判别的点向大四方向发射线,然后计算图形与线条交点的个数,个数为奇数则改点在图片内,需求填写;个数为偶数则点在图纸外,不要求填写。看下图的演示:

图片 30

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

唯独我们开采,我们的箭头纵然填写了颜色,照旧怎么也看不见,难点就出在大家绘制的时候利用了未曾面积的
line 标签。那年,就必要出动描边了。

Step肆、绘制嘴巴

XHTML

<circle cx=”50″ cy=”70″ r=”15″ style=”fill: none; stroke: #fff;
stroke-width: 5; stroke-linecap: round;transform: rotate(280deg);
transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42,
95;”>

1
<circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;”>

嘴巴是一段圆弧,小编绘制了贰个圆,然后描边了当中的1段,并且做了2个转悠,来让它的角度处于不利的地方。

  • stroke-linecap:用来定义开放路径的收尾,可选round|butt|square
  • stroke-dasharray:用来成立虚线
  • stroke-dashoffset:设置虚线地点的序曲偏移值,在下一手续里,它会和stroke-dasharray一起用来完毕动作效果。

图片 31

未来的饼图


正方形渐变在那里也得以11分有帮带。它只需求一个圆形元素,以及富含三个色标的锥形渐变就能够做出饼图。举个例子,图5中代表十分四的饼图能够这么造成:

图片 32

CSS

.pie { width: 100px; height: 100px; border-radius: 50%; background:
conic-gradient(#655 40%, yellowgreen 0); }

1
2
3
4
5
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: conic-gradient(#655 40%, yellowgreen 0);
}

还有,一旦CSS Values Level
3中定义的attr()函数更新后被分布应用,你就足以用轻便的HTML属性来支配百分比了:

CSS

background: conic-gradient(#655 attr(data-value %), yellowgreen 0);

1
background: conic-gradient(#655 attr(data-value %), yellowgreen 0);

要增多第两种颜色也卓殊轻便。比方,对于地点凸显的饼图,大家只须求再充实多少个色标:

CSS

background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%, yellowgreen
0);

1
background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%, yellowgreen 0);

:多亏了Lea的锥形渐变polyfill,大家后天才足以动用锥形渐变,在她的SmashingConf演讲停止不久自此发布的。那可能便是你今后用CSS来布置饼图的法子!那里的二种办法您会使用什么哪类,以及为啥如此做?只怕您早就想到了1个截然两样的消除方案?请在评价中留言~

1 赞 2 收藏
评论

图片 33

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 属性与网页成分有所不一样。

描边——stroke

这个 stroke 可得极尽描摹,因为光是那一个 stroke
就能解决八成的描线动作效果。

直白通过 stroke 设置描边色,大家就能霎时看出刚才的箭头了。通过
stroke-width 则能够对描边的粗细进行退换。

CSS

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

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

图片 34

Step五、给嘴巴部分加多动效

CSS

@keyframes mouth { 0% { transform: rotate(-80deg); stroke-dasharray: 60,
95; stroke-dashoffset: 0; } 40% { transform: rotate(280deg);
stroke-dasharray: 60, 95; stroke-dashoffset: 0; } 70%, 100% { transform:
rotate(280deg); stroke-dashoffset: -23; stroke-dasharray: 42, 95; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes mouth {
  0% {
    transform: rotate(-80deg);
    stroke-dasharray: 60, 95;
    stroke-dashoffset: 0;
  }
  40% {
    transform: rotate(280deg);
    stroke-dasharray: 60, 95;
    stroke-dashoffset: 0;
  }
  70%, 100% {
    transform: rotate(280deg);
    stroke-dashoffset: -23;
    stroke-dasharray: 42, 95;
  }
}

动画分为四个部分:

  1. 圆弧旋转
  2. 旋转之后减弱变形

在1个巡回里,最后留有百分之三十的时刻维系多少个停留。

图片 35

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

(敲黑板)金牌属性出现辣!
以此性情的属性值是1到 n 个数字,四个数字由逗号隔绝,CSS
中的定义则由空格分开,各样数字定义了实线段的尺寸,分别是遵照绘制、不绘制这几个顺序循环下去。

上面是安装了1个、三个、贰个数字时虚线的描绘意况相比:

图片 36

Step陆、给眼睛加多动画

四只眼睛都以本着圆弧运动 ,比方左眼,首先用一个路线来规定它的位移轨迹:

XHTML

<path id=”eyeright” d=”M 40 60 A 15 15 180 0 1 60 60″ style=”fill:
none; stroke-width: 0;” />

1
<path id="eyeright"  d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />

接下来利用animateMotion来安装动画:

XHTML

<circle class=”eye” cx=”” cy=”” r=”2.5″ style=”fill: #fff;”>
<animateMotion dur=”0.8s” repeatCount=”indefinite”
keyPoints=”0;0;1;1″ keyTimes=”0;0.3;0.9;1″ calcMode=”linear”>
<mpath xlink:href=”#eyeleft”/> </animateMotion>
</circle>

1
2
3
4
5
6
7
8
9
10
<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
  <animateMotion
    dur="0.8s"
    repeatCount="indefinite"
    keyPoints="0;0;1;1"
    keyTimes="0;0.3;0.9;1"
    calcMode="linear">
    <mpath xlink:href="#eyeleft"/>
  </animateMotion>
</circle>
  • dur:动画的时间
  • repeatCount:重复次数
  • keyPoints:运动路径的关键点
  • timePoints:时间的关键点
  • calcMode:调控动画的运动速率的扭转,discrete | linear | paced |
    spline多个属性可选
  • mpath:钦赐三个外表定义的路子

图片 37

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

stroke-dashoffset

(敲黑板)这些也是重要属性!
当咱们将描边虚实设置成实线部分与图片描边长度一样时,我们是看不到空白段的1部分的。那时形状的描边就好像完全描绘出来了平等。那时大家采用那么些本性,将虚线开头的职位有个别做一下运动,无论是往前移依旧未来移,大家都能收看图片描边现身了一段空白,当以此活动产生1个老是的动作时,描线动作效果就那样十分大心的出现了(蓦然回首)。

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

图片 38

再对尾部做个延时管理,修改一下虚线移动的动向,动作效果看起来会更美貌一些。那一年,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;
}

图片 39

询问了那多少个主要属性,动效剩下的重担,就落在了 dasharray 与 dashoffset
值的乘除上了。那些手续或者未有何样捷径,简单的直线、弧线之类的大概仍是能够口算口算,别的的歇斯底里图形也就只有多试那条傻路可走,假若你是图形高手就当自家没说。

除此以外多少个描边属性:stroke-linecapstroke-linejoinstroke-miterlimit
由于权且用不上惨遭甩掉,具体可参看MDN-SVG Tutorial-Fills and
Strokes,stroke-miterlimit
详解SVG 商量之路(1陆)-
Stroke-miterlimit。

相关文章

发表评论

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

网站地图xml地图