一个例子上手,图像入门教程

一个事例上手 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

原文出处: 阮一峰   

HTML5新特色之用SVG绘制微信logo,html5svg

HTML5新特新
HTML5 中的一些有意思的新特性:
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对地点离线存储的更好的支撑
4、新的很是内容元素,比如 article、footer、header、nav、section
5、新的表单控件,比如 calendar、date、time、email、url、search
SVG绘制图片效果图:

澳门葡京 2

代码如下:
代码如下:
<style>
* {
padding: ;
margin: ;
}
body {
background-color: #ddd;
}
.container {
width: px;
height: px;
position: relative;
top: px;
left: %;
transform: translated(-%,,);
background-color:#c;
border-radius: px;
box-shadow: px #cbfbf;
}
.container object{
position:relative;
top:px;
left:px;
}
</style>
<body>
<div class=”container”>
<object data=”logo.svg” width=”” height=”” type=”image/svg+xml”
/>
</div>
</body>

其一是xml格式的代码,跟html文档分离的。

代码如下:
<?xml version=”.” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//WC//DTD SVG .//EN”
“;
<svg width=”%” height=”%” version=”.”
xmlns=”;
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:rgb(,,);stroke:rgb(,,);stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<polygon points=”, , ,”
style=”fill:#fff;stroke:#fff;stroke-width:”/>
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<ellipse cx=”” cy=”” rx=”” ry=””
style=”fill:rgb(,,);stroke:rgb(,,);stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<circle cx=”” cy=”” r=””
style=”fill:#c;stroke:#c;stroke-width:”/>
<polygon points=”, , ,”
style=”fill:#fff;stroke:#fff;stroke-width:”/>
</svg>

以上所述是作者给我们享用的HTML5新特性之用SVG绘制的微信logo
,希望对大家有着支持。

HTML5新特新 HTML5 中的一些妙不可言的新特色: 1、用于绘画的 canvas 元素
2、用于媒介回看的 video 和 audi…

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)坐标向下递增。

澳门葡京 3

在未曾点名的处境下,所有的的数值默许单位都是像素。

依照变换的化解方案


其一方案从HTML的角度来说是最好的:它只须要一个元素,其余的都可以用伪元素、变换和CSS渐变落成。大家从下面这一个不难的要素起初:

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

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

今日,如若大家期待显示一个 20% 比例的饼图。灵活性的题目大家后边再解决。大家先给元素添加样式,让它成为一个圆,也就是大家的背景:

澳门葡京 4

图1:第一步是先画一个圆(或者能够说是突显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 ,可是透过一遍试验之后注脚,那是一个丰盛混乱的方案。因而,大家用那三种颜色为这些饼图的左右有些各自着色,然后对于我们想要的比重,使用旋转的伪元一贯落到实处。

俺们运用一个概括的线性渐变,给右半部分着绿色:

CSS

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

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

澳门葡京 5

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

澳门葡京 6

图3:虚线内的内容表示伪元素将用作蒙版的区域

您能够在图3中见到大家的伪元素当前稳定相对于大家的pie元素。近来,它还从未添加样式,也尚未掩盖任何事物,只是一个晶莹剔透的矩形。在开头添加样式在此之前,大家先来分析一下:

  • 因为大家愿意它覆盖圆的粉红色部分,大家需要给它利用一个红色的背景,使用
    background-color: inherit 来防止重新定义,因为大家自然就愿意它和父元素的背景颜色保持一致。
  • 咱们意在它绕着圆的中央点旋转,主题点在伪元素的左手,所以我们须求给它的
    transform-origin ,应用一个
    0 50% ,或者是一向一个 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;
}

澳门葡京 7

图4:添加样式之后的伪元素(那里用虚线表示)

小心:不要使用 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() 变换。要出示 20% 的比重,大家得以给它一个 72deg ( 0.2 x 360 = 72 ),或 .2turn ,那几个可读性更好。你可以在图5中看看分歧旋转角度值的结果。

澳门葡京 8

图5:分别展现差距比重的饼图,从左到右: 10%  ( 36deg 或 .1turn ), 20%  ( 72deg 或  .2turn ), 40%  ( 144deg  或 .4turn )

你也许会想大家曾经做到了,可是它可没那样简单。大家的饼图在突显050%的轻重缓急的内容时是绝非其它问题的,不过只要大家要描绘一个
60% 的旋转(通过选择 .6turn ),就会爆发如图6的景观。然则,别担心,大家得以化解那么些业务!

澳门葡京 9

图6:对于超越50%的比例,我们的饼图就跪了orz(那里的是60%)

要是大家把 50%-100% 比例的情况作为单身的一个问题,可能会注意到可以选用从前的化解方案的反相版本:从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);
}

澳门葡京 10

图7: 60% 饼图的不易打开格局~

你可以在图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’;
});

澳门葡京 11

图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)。其余图像格式都是基于像素处理的,SVG
则是属于对图像的造型描述,所以它实质上是文本文件,体积较小,且不论放大多少倍都不会失真。

澳门葡京 12

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

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

澳门葡京 13

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

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独家用来安装描边色和描边的小幅。

澳门葡京 14

按照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元素的性能使用,假如把可移植性考虑在内的话那也许挺方便的。

澳门葡京 15

图9:从一个肉色的SVG圆形,带一个胖胖的#655描边早先

你能够在图9中观看大家绘制的加了描边的圆。SVG描边不止有strokestroke-width属性。还有不少不是特地流行的描边相关的习性可以用来对描边举办微调。其中一个是stroke-dasharray,用于成立虚线描边。例如,大家得以选用如下:

CSS

stroke-dasharray: 20 10;

1
stroke-dasharray: 20 10;

澳门葡京 16

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

澳门葡京 17

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

如图11中的第二个圆所示,它的描边的都被移除了,只剩下一个粉色的圆。可是,当我们发轫增大第二个值的时候,有趣的政工爆发了(图11):因为边距太长,我们就不曾虚线描边了,唯有一个描边覆盖了俺们指定的圆的周长的百分比。

您恐怕已经起首弄领会了那是怎么回事:假设大家把圆的半径减小到自然水平,它可能就会完全被它的描边覆盖,最后收获的是一个可怜类似于饼图的事物。例如,你可以在图12中见到:当给圆应用一个25的半径和一个50stroke-width,像上边的效率:

澳门葡京 18

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

澳门葡京 19

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

用作一个额外的改正,我们可以在圆上指定一个特定半径,使其周长无限接近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>要素一样,被默许为是内容的一片段,打印完全小问题。第一种方案取决于背景,所以不会被打印。
  • 大家可以利用内联样式改变颜色,也就是说大家得以因而脚本就直接改动颜色(如,根据用户输入改变颜色)。第一种方案依赖于伪元素,除了通过三番五次,它从未任何方法可以加上内联样式,那很不便于。

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

运用基础形状,画八个个小圆点。两个特性分别是岗位坐标、半径和填充颜色。
澳门葡京 20

相关资源


  • 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一起用来贯彻动效。

澳门葡京 21

唐代的饼图


圆锥形渐变在此间也足以丰裕有接济。它只须求一个圆形元素,以及带有多少个色标的锥形渐变即可做出饼图。例如,图5中表示40%的饼图可以如此形成:

澳门葡京 22

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

澳门葡京 23

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. 旋转之后减弱变形

在一个巡回里,最后留有30%的光阴维系一个停留。

澳门葡京 24

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:指定一个外表定义的路线

澳门葡京 25

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、将差异部位的动画组成到一道

  • 肉眼的卡通是从嘴巴旋转完毕起来,到嘴巴变形已毕收尾,因而和嘴巴的卡通片一样,我设置了多个照应的重大时间点。
  • 为了让衔接更顺畅,眼睛的动画片起头比嘴巴变形开首有点提前了一点点。

澳门葡京 26

参考:

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

    1 赞 2 收藏
    评论

澳门葡京 27

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属性指定了矩形的肥瘦和惊人(单位像素)。

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)源点的横坐标和纵坐标。文字的体制可以用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属性值有多少个数字,第四个数字是角度值,第三个值和第多个值是旋转大旨的坐标。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 赞 收藏
评论

澳门葡京 28

相关文章

发表评论

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

*
*
Website