用CSS和SVG制作饼图,图像入门教程

三个事例上手 SVG 动漫

2017/05/05 · HTML5 ·
SVG

原来的小说出处:
坑坑洼洼实验室   

CSS3动画已丰盛苍劲,可是依然有局地它做不到之处。同盟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

初稿出处: 阮一峰   

Step1、声明SVG视口

XHTML

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

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

点名七个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也能够利用其它的合法单位,举例cm、mm、em等

翻阅器会设置一个暗许的坐标体系,见图:左上角为原点,在这之中国水力电力对国集团平(x卡塔尔坐标向右依次增加,垂直(y卡塔尔坐标向下依次增加。

澳门太阳集团登录网址 2

在未曾点名的情事下,全部的的数值暗中认可单位都以像素。

依据转变的缓和方案


这几个方案从HTML的角度来讲是最佳的:它只必要一个要素,此外的都足以用伪成分、转变和CSS渐变实现。我们从上面那么些大约的因素开始:

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

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

前几日,即使大家期待展现三个 伍分一 比例的饼图。灵活性的主题素材大家前面再化解。我们先给成分增加样式,让它形成二个圆,也正是大家的背景:

澳门太阳集团登录网址 3

图1:第一步是先画一个圆(也许能够说是呈现0%比例的饼图卡塔 尔(英语:State of Qatar)

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 卡塔 尔(英语:State of Qatar)展现的比重。或者会在比例部分尝试运用
transform 中的 skew ,可是透过两次考试之后评释,那是二个特别混乱的方案。因而,大家用那二种颜色为这么些饼图的左右有的各自着色,然后对于大家想要的比重,使用旋转的伪成分来促成。

笔者们运用二个简易的线性渐变,给右半部分着暗紫:

CSS

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

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

澳门太阳集团登录网址 4

图2:用一个总结的线性渐变给右半圆着米白

如图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%;
}

澳门太阳集团登录网址 5

图3:虚线内的开始和结果表示伪成分将作为蒙版的区域

你能够在图3中见到大家的伪成分当前稳住相对于我们的pie成分。方今,它还不曾增加样式,也从未掩没任刘宝贤西,只是贰个透明的矩形。在上马增添样式早先,大家先来深入分析一下:

  • 因为我们期待它覆盖圆的法国红部分,咱们须求给它利用四个稻草黄的背景,使用
    background-color: inherit 来制止重新定义,因为我们当然就可望它和父成分的背景颜色保持生机勃勃致。
  • 我们愿意它绕着圆的骨干点旋转,中央点在伪成分的侧面,所以大家供给给它的
    transform-origin ,应用一个0 四分之二 ,也许是直接七个 left 。
  • 作者们不想要它是三个矩形,因为它会超过饼图的边缘,所以大家须要给 .pie 应用 overflow: hidden ,恐怕是贰个老少咸宜的
    border-radius 让它形成三个半圆。

综合,伪成分的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;
}

澳门太阳集团登录网址 6

图4:增添体制之后的伪成分(这里用虚线表示卡塔 尔(英语:State of Qatar)

专心:不要使用 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 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 ;,否则父成分背景图像上的渐变也会被接续

咱俩的饼图这段日子如图4所示。现在开班风趣起来了!大家得以伊始转动伪成分,给它选拔三个rotate() 调换。要呈现 百分之三十三 的比重,我们得以给它贰个 72deg ( 0.2 x 360 = 72 卡塔尔,或 .2turn ,那么些可读性越来越好。你可以在图5中看出不一样旋转角度值的结果。

澳门太阳集团登录网址 7

图5:分别呈现差别比例的饼图,从左到右: 一成  ( 36deg 或 .1turn ), 四分之三  ( 72deg 或  .2turn ), 60%  ( 144deg  或 .4turn )

您可能会想大家曾经到位了,不过它可没那样轻松。大家的饼图在显示050%的轻重缓急的内容时是绝非此外难点的,可是固然大家要描写一个伍分叁 的团团转(通过应用 .6turn 卡塔 尔(阿拉伯语:قطر‎,就可以时有发生如图6的动静。然而,别顾忌,大家得以消除那么些业务!

澳门太阳集团登录网址 8

图6:对于超过四分之二的百分比,大家的饼图就跪了orz(这里的是百分之七十卡塔尔国

借使我们把 贰分一-百分百 比例的情况作为单身的二个难点,也许会注意到能够动用在此以前的解决方案的反相版本:从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);
}

澳门太阳集团登录网址 9

图7: 四分三 饼图的不利展开药格局~

您能够在图7中见到结果。因为我们已经拟定了叁个得以描绘出任何百分比的点子,我们以致可感到饼图从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%。首先,大家先切磋一下怎样选拔内联样式来形成,然后大家得以写叁个粗略的脚本来深入分析文本内容,对应地抬高内联样式,何况要代码高贵、封装、可维护性,还应该有最紧要的少数,可访谈性。

行使内联样式调整饼图百分比的二个不方便是:用于安装百分比CSS代码是用伪成分落成的。并且你也知道,大家不可能给伪成分设置内联样式,所以大家必要修正。

瞩目:固然你想要使用的值是在有些没有供给经过重新的千头万绪的计量的界定内的动静,你能够应用同生机勃勃的技艺,包罗透过它们一步一步调节和测量试验动漫的景色。看该手艺的叁个简言之的亲自去做。

 

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

杀鸡取蛋方案来自最不容许的地点之生龙活虎。大家将在选用大家早已介绍过的动漫片,但是它是搁浅状态的。大家不会让它像四个正规的卡通那样运维,大家将选拔负延迟来让它能够静态地暂停在有些点。很想获得?一个负的animation-delay的值不仅仅在标准中是允许的,在看似那样的案例中也是足够好用:

负延迟是实用的。和0s的推移雷同,它表示动漫将立时实践,不过是遵照延迟的断然值来自动运维的,所以生机勃勃旦动漫已经在钦定的时辰在此以前就开首运营了,这它就能够直接从active的时间中途运维。
—CSS Animations Level
1

因为大家的动漫片是暂停的,它的第后生可畏帧正是我们唯豆蔻梢头显示的那意气风发帧(通过我们的animation-delay概念卡塔尔国。饼图上海展览中心示的比例将会是大家的animation-delay的总时间。举例,当前的持续时间是6s,我们的
animation-delay 值为-1.2s则显示20%的比重。为了简化总计,大家设置贰个100s的持续时间。记住因为我们的动漫片是长久暂停的,大家给它钦定的延迟大小并不会有哪些影响。

再有最终一个标题:动漫是赋给伪成分的,不过大家想要给.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标签改成采用比例作为内容,和一同头期望的相符,然后通过叁个简便的台本为其加多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’;
});

澳门太阳集团登录网址 10

图8:未有蒙蔽文本前的图

  • 把饼图的height转移成 line-height (或丰裕一个和height值卓越的line-height,可是那值是毫无意义的再次代码,因为line-height会自动测算height的值)。
  • 经过相对定位给伪元素设置大小和岗位,那样它不会把公文挤下去。
  • 拉长 text-align: center; 让文本水平居中。

最终的代码如下:

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卡塔 尔(英语:State of Qatar)。别的图像格式都以依照像素管理的,SVG
则是归属对图像的形态描述,所以它实质上是文件文件,体量非常小,且无论放许多少倍都不会失真。

澳门太阳集团登录网址 11

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 UEvoqueI 写入网页。

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

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

Step2、绘制购物袋

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

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起头,前面紧跟着7个参数,那7个参数分别用来表示:

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

澳门太阳集团登录网址 12

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

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分级用来安装描边色和描边的增长幅度。

澳门太阳集团登录网址 13

依靠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成分的习性使用,借使把可移植性思考在内的话那说不许挺方便的。

澳门太阳集团登录网址 14

图9:从一个红棕的SVG圆形,带三个胖胖的#655描边起初

您能够在图9中来看我们绘制的加了描边的圆。SVG描边不唯有有strokestroke-width品质。还也可能有好些个不是特意流行的描边相关的习性能够用来对描边进行微调。当中三个是stroke-dasharray,用于创立虚线描边。比如,大家可以运用如下:

CSS

stroke-dasharray: 20 10;

1
stroke-dasharray: 20 10;

澳门太阳集团登录网址 15

图10:三个轻易易行的虚线描边,通过stroke-dasharray品质成立

那行代码的情趣是我们的虚线是20的长度加上10的边距,如图10所示。在那处,你或者会欣喜这一个SVG描边属性和饼图毕竟有怎样关系啊。假如大家给描边应用贰个值为0的虚线宽度,和贰个高于或等于大家当前圆的周长的边距,它或然就清楚一些了(计算周长:
C = 2πr , 所以在那处  C = 2π × 30 ≈ 189 卡塔尔国:

CSS

stroke-dasharray: 0 189;

1
stroke-dasharray: 0 189;

澳门太阳集团登录网址 16

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

如图1第11中学的第五个圆所示,它的描边的都被移除了,只剩下一个暗蓝的圆。不过,当大家开端增大第多个值的时候,风趣的政工作时间有产生了(图11卡塔尔国:因为边距太长,大家就从不虚线描边了,唯有叁个描边覆盖了大家钦命的圆的周长的比重。

您大概曾经起来弄通晓了那是怎么回事:假设我们把圆的半径减小到早晚程度,它或者就会完全被它的描边覆盖,最终取得的是叁个老大附近于饼图的东西。举个例子,你能够在图1第22中学看出:当给圆应用三个25的半径和一个50stroke-width,像上边包车型地铁职能:

澳门太阳集团登录网址 17

图12:我们的SVG图像早先像一个饼图了O(∩_∩)O

深深记住:SVG描边总是相对于成分边缘二分之一在内八分之四在外的(居中的卡塔尔国。今后应该可以调控那生机勃勃作为。

<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 */
}

不久前,把它变成大家在上二个消除方案中创造的饼图的范例是特别轻便的:我们只供给在描边上边加多叁个更加大的暗绛红圆形,然后逆时针转动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%;
}

澳门太阳集团登录网址 18

图13:最后的SVG饼图

你可以在图第13中学看看最后结出。这种技能能够让饼图更易于达成从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;
}

作为多个至极的精耕细作,我们得以在圆上钦命三个特定半径,使其周长Infiniti附近100,那样我们得以用百分比内定stroke-dasharray的长短,而无需做计算。因为周长是2πr,大家的半径则是100 ÷ 2π ≈ 15.915494309,约等于16。我们还足以用viewBox特点内定SVG的尺码,能够让它自动调节为容器的大大小小,不要选择widthheight属性。

透过以上调解,图13的饼图的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来帮大家生机勃勃把了。大家写一个大概的台本,让大家的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方案照旧有早晚的优势的:

  • 可以特别轻便地加上第三种颜色:只供给增加另多个描边圆,然后选取stroke-dashoffset设置它的描边属性。然后,将它的描边长度增加到下方的圆的描边长度上。如若是眼下那多少个CSS的方案,你要怎么着给饼图增加第二种颜色吗?
  • 咱俩无需考虑打字与印刷的标题,因为SVG成分就如<img>要素近似,被默以为是内容的大器晚成有些,打印完全没反常。第生机勃勃种方案决定于背景,所以不会被打字与印刷。
  • 咱俩得以接收内联样式校勘颜色,也等于说我们能够经过脚本就一贯改革颜色(如,依照顾客输入改造颜色卡塔 尔(英语:State of Qatar)。第黄金年代种方案信赖于伪成分,除了通过持续,它未有其他格局能够加多内联样式,那特不实惠。

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

二、语法

Step3、绘制眼睛

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

接受根底形状,画多少个个小圆点。多天本性分别是岗位坐标、半径和填充颜色。
澳门太阳集团登录网址 19

连锁财富


  • CSS Transforms
  • CSS Image Values
  • CSS Backgrounds & Borders
  • Scalable Vector Graphics
  • CSS Image Values Level 4

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 成分的尺寸。

Step4、绘制嘴巴

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

嘴巴是风流浪漫段圆弧,作者绘制了三个圆,然后描边了中间的生机勃勃段,並且做了一个转悠,来让它的角度处李樯确的职分。

  • stroke-linecap:用来定义开放路径的甘休,可选round|butt|square
  • stroke-dasharray:用来创设虚线
  • stroke-dashoffset:设置虚线地点的前奏偏移值,在下一步骤里,它会和stroke-dasharray一齐用来得以达成动作效果。

澳门太阳集团登录网址 20

他日的饼图


长方形渐变在这里间也能够特别常有帮带。它只要求四个圆产生分,以致带有多个色标的锥形渐变就可以做出饼图。举例,图5中表示五分二的饼图能够这么变成:

澳门太阳集团登录网址 21

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

澳门太阳集团登录网址 22

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

Step5、给嘴巴部分加多动作效果

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. 旋转之后缩小变形

在一个周而复始里,最终留有40%的时日维系一个停留。

澳门太阳集团登录网址 23

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

Step6、给眼睛增添动漫

多只眼睛都以本着圆弧运动 ,举个例子左眼,首先用贰个路线来规定它的移动轨迹:

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:钦赐三个外表定义的路子

澳门太阳集团登录网址 24

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

Step7、将区别位置的动漫片组成到一块儿

  • 肉眼的动漫片是从嘴巴旋转达成起来,到嘴巴变形完成得了,由此和嘴巴的动漫相符,笔者设置了三个关照的器重时间点。
  • 为了让衔接更通畅,眼睛的卡通片最早比嘴巴变形开首有一点点提前了一丢丢。

澳门太阳集团登录网址 25

参考:

  • MDN-SVG文档
  • 《SVG精粹》- 人民邮电出版社

    1 赞 2 收藏
    评论

澳门太阳集团登录网址 22

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属性钦赐了矩形的宽窄和冲天(单位像素卡塔 尔(英语:State of Qatar)。

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

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

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:闭合路线

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卡塔 尔(英语:State of Qatar)源点的横坐标和纵坐标。文字的体裁能够用classstyle特性钦命。

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

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>

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>

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>的增长幅度和长度是事实上的像素值。然后,内定那么些方式去填充上面包车型大巴矩形。

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品质表示图像的来源于。

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

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属性值有八个数字,第三个数字是角度值,第3个值和第多个值是旋转中央的坐标。from="0 200 200"代表在这早先时,角度为0,围绕(200, 200)发端转动;to="360 400 400"表示结束时,角度为360,围绕(400, 400)旋转。

三、JavaScript 操作

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

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。

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’));

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

四、实例:折线图

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

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>

五、参考链接

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

澳门太阳集团登录网址 22

发表评论

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