菜单

叁看 SVG Web 动作效果

2019年4月16日 - 金沙前端

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

运用基础形状,画七个个小圆点。八个属性分别是岗位坐标、半径和填充颜色。
图片 1

依据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成分的属性使用,若是把可移植性思索在内的话这也许挺便宜的。

图片 2

图玖:从一个鲜红的SVG圆形,带三个胖胖的#655描边开头

你能够在图九中观察我们绘制的加了描边的圆。SVG描边不止有strokestroke-width属性。还有为数不少不是越发流行的描边相关的属性可以用于对描边举办微调。当中贰个是stroke-dasharray,用于创制虚线描边。例如,我们能够使用如下:

CSS

stroke-dasharray: 20 10;

1
stroke-dasharray: 20 10;

图片 3

图10:二个粗略的虚线描边,通过stroke-dasharray性格创造

那行代码的意思是我们的虚线是20的尺寸加上10的边距,如图十所示。在此处,你可能会欢快那一个SVG描边属性和饼图究竟有怎样关联吧。假设我们给描边应用三个值为0的虚线宽度,和八个超越或等于大家当前圆的周长的边距,它也许就清清楚楚一些了(总计周长:
C = 二πr , 所以在此处  C = 二π × 30 ≈ 18九 ):

CSS

stroke-dasharray: 0 189;

1
stroke-dasharray: 0 189;

图片 4

图11:不同stroke-dasharray值对应的效应;从左到右: 0 18九; 40 18玖; 玖五 18玖; 150 18九 

如图1第11中学的第一个圆所示,它的描边的都被移除了,只剩余3个郎窑红的圆。但是,当大家开首增大第11个值的时候,遗闻体时有爆发了(图1一):因为边距太长,我们就未有虚线描边了,只有3个描边覆盖了咱们钦点的圆的周长的百分比。

你恐怕早已上马弄领悟了这是怎么回事:假如我们把圆的半径减小到一定水准,它可能就会全盘被它的描边覆盖,最终得到的是二个要命周边于饼图的东西。例如,你能够在图1第22中学来看:当给圆应用叁个25的半径和2个50stroke-width,像下边包车型地铁成效:

图片 5

图1二:我们的SVG图像初叶像2个饼图了O(∩_∩)O

牢记:SVG描边总是绝对于成分边缘八分之四在内3/6在外的(居中的)。未来理应能够调整那1行事。

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

后天,把它产生大家在上1个解决方案中创立的饼图的规范是非凡轻便的:大家只须求在描边上边加多一个更加大的水泥灰圆形,然后逆时针旋转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%;
}

图片 6

图13:最后的SVG饼图

您能够在图一叁中看看末了结果。那种本领能够让饼图更便于实现从0%100%扭转的动画。大家只供给创造3个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;
}

作为1个附加的句酌字斟,大家得以在圆上钦命2个特定半径,使其周长Infiniti接近100,那样我们得以用百分比钦点stroke-dasharray的尺寸,而不供给做计算。因为周长是2πr,我们的半径则是100 ÷ 2π ≈ 15.915494309,约等于16。大家还是能够用viewBox天性钦定SVG的尺码,能够让它自动调整为容器的轻重,不要选取widthheight属性。

透过以上调节,图一3的饼图的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把了。大家写1个简单的脚本,让大家的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.

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品质表示绘制顺序,它的值是1个长字符串,每种字母代表贰个绘制动作,前面跟着坐标。

第三个美妙的动作效果

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

图片 7

先是,大家观看一下那么些播放键的构造的兑现格局(Codepen)(注:为了能直观地观看成效,作者将
.play-icon-blend
的填充与描边改为了驼色,原例子中为铁蓝):

XHTML

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

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

CSS

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

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

那边顺带用了一下下 CSS3
的滤镜
mix-blend-mode(SVG
也有滤镜功效,那里不做牵线,感兴趣的能够移动《突袭 HTML5 之 SVG 2D
入门10 –
滤镜》)。那里运用的值
exclusion
的职能,是在叠加区域只展现亮色,上面是利用了壹如既往滤镜的图片与正规图片的自己检查自纠图,感受一下:

图片 8

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

能够看出代码里还现身了1些了不可的竹签——
<defs><use>。接下来,大家就来了然一下它们。

首先我们清楚,通过中间圆圈的缩放,再加上国中医药大学学围圆圈与基本三角的增大效应,实现了这些hover 效果。也就意味着,圆圈在那边用到五回。今年就能够应用 SVG
里路线的选定与引用功效。

3个事例上手 SVG 动画

2017/05/05 · HTML5 ·
SVG

最初的文章出处:
坑坑洼洼实验室   

CSS三动画已足够强劲,可是照旧有部分它做不到的地方。协作SVG,让Web动作效果有越来越多的恐怕。此次要做的效劳是2个loading动画(如图):当中旋转通过CSS来完结,不过旋转之后圆弧收缩变成笑脸的嘴巴需求借助SVG来实现。

图片 9

连带财富


2.16 <animateTransform>标签

<animate>标签对 CSS
transform属性不起成效,假使急需变形,就要选取<animateTransform>标签。

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

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

地点代码中,<animateTransform>的功用为旋转(rotate),这时fromto属性值有多少个数字,第2个数字是角度值,首个值和第一个值是旋转宗旨的坐标。from="0 200 200"意味着初叶时,角度为0,围绕(200, 200)始于转动;to="360 400 400"表示甘休时,角度为360,围绕(400, 400)旋转。

stroke-dashoffset

(敲黑板)这一个也是重大属性!
当大家将描边虚实设置成实线部分与图片描边长度同样时,我们是看不到空白段的片段的。这时形状的描边就像是完全描绘出来了扳平。这时大家选用那个性格,将虚线伊始的任务有些做一下平移,无论是往前移依然以往移,大家都能观察图片描边出现了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;
}

图片 10

再对底部做个延时处理,修改一下虚线移动的大方向,动作效果看起来会越来越精彩一些。今年,SVG
能够分路线编辑的优势就呈现出来了。对各类 line
增加1个类,大家就能对每条路子进行差别化处理(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;
}

图片 11

打听了那七个根本属性,动效剩下的重担,就落在了 dasharray 与 dashoffset
值的计量上了。那些手续可能从未怎么走后门,轻松的直线、弧线之类的大概还能够口算口算,别的的非平常图形也就唯有多试那条傻路可走,借使你是图形高手就当笔者没说。

除此以外多个描边属性:stroke-linecapstroke-linejoinstroke-miterlimit
由于目前用不上惨遭摒弃,具体可参考MDN-SVG Tutorial-Fills and
Strokes,stroke-miterlimit
详解SVG 切磋之路(16)-
Stroke-miterlimit。

Step1、声明SVG视口

XHTML

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

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

钦赐七个宽高都为100像素的区域,width=”十0”和width=”十0px”是等价的,当然也得以应用此外的官方单位,例如cm、mm、em等

翻阅器会设置3个私下认可的坐标系列,见图:左上角为原点,在这之中水平(x)坐标向右递增,垂直(y)坐标向下递增。

图片 12

在尚未点名的事态下,全数的的数值默许单位都以像素。

基于转变的化解方案


以此方案从HTML的角度来讲是最佳的:它只必要3个因素,别的的都得以用伪成分、转换和CSS渐变实现。我们从底下这些轻便的元素开端:

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

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

方今,尽管大家期望显示3个 二成 比例的饼图。灵活性的主题材料大家后边再消除。大家先给成分添加样式,让它变成四个圆,相当于我们的背景:

图片 13

图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 )和乳白( #65五 )展现的比重。大概会在比例部分尝试使用
transform 中的 skew ,但是透过四遍试验之后申明,那是二个要命混乱的方案。由此,我们用那二种颜色为那一个饼图的左右片段各自着色,然后对于大家想要的比重,使用旋转的伪成分来兑现。

作者们利用三个轻巧的线性渐变,给右半部分着芥末黄:

CSS

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

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

图片 14

图二:用叁个简便的线性渐变给右半圆着灰白

如图二所示,那样就产生了。今后,我们得以持续为伪成分加多样式,让它形成一个蒙版:

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

图片 15

图叁:虚线内的内容表示伪成分将用作蒙版的区域

你能够在图3中来看大家的伪成分当前一直相对于大家的pie成分。近来,它还不曾增进样式,也尚无覆盖任李菲西,只是二个透明的矩形。在初步增多样式以前,我们先来分析一下:

归咎,伪成分的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;
}

图片 16

图四:增添样式之后的伪成分(那里用虚线表示)

留意:不要选用 class=”crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco”
style=”font-size: 一三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() 调换。要来得 五分之一 的百分比,大家得以给它三个 72deg ( 0.2 x 360 = 72 ),或 .二turn ,那么些可读性更加好。你可以在图5中看看不相同旋转角度值的结果。

图片 17

图五:分别突显不一样比例的饼图,从左到右: 一成  ( 3六deg 或 .一turn ), 十分二  ( 72deg 或  .二turn ), 十分之四  ( 14四deg  或 .肆turn )

您恐怕会想大家早已完毕了,但是它可没这么轻巧。大家的饼图在展现050%的高低的内容时是从未有过任何难点的,然而要是大家要描写三个3/5 的团团转(通过动用 .6turn ),就会发出如图6的地方。但是,别怀念,大家能够消除这一个业务!

图片 18

图陆:对于大部分的比重,大家的饼图就跪了orz(那里的是五分之三)

比方大家把 四分之二-百分百 比例的状态作为独立的贰个主题素材,或许会注意到能够运用此前的解决方案的反相版本:从0.5turn旋转的红肉桂色伪成分。所以,对于2个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);
}

图片 19

图7: 十分六 饼图的不利展开药格局~

你能够在图七中看到结果。因为我们曾经制定了2个得以描绘出任何百分比的措施,大家甚至足感到饼图从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>

下一场就足以得到四个饼图,2个意味20%,一个象征60%。首先,我们先研究一下怎么着利用内联样式来成功,然后大家得以写贰个大约的脚本来分析文本内容,对应地抬高内联样式,而且要代码优雅、封装、可维护性,还有最重点的少数,可访问性。

应用内联样式调整饼图百分比的多少个劳累是:用于安装百分比CSS代码是用伪成分实现的。而且你也亮堂,大家不可能给伪成分设置内联样式,所以大家必要立异。

在意:若是你想要使用的值是在有个别不需求经过重新的复杂性的盘算的限量内的情景,你能够行使同样的技艺,包含经过它们一步一步调节和测试动画的动静。看该本领的3个简短的言传身教。

 

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的持续时间。记住因为大家的动画片是长久暂停的,大家给它钦点的延迟大小并不会有哪些震慑。

还有最终3个标题:动画是赋给伪成分的,可是我们想要给.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’;
});

图片 20

图8:未有隐藏文本前的图

最终的代码如下:

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 图像入门教程

2018/08/07 · HTML5 ·
SVG

初稿出处: 阮一峰   

线的底细:stroke-dasharray

(敲黑板)金牌属性出现辣!
本条个性的属性值是壹到 n 个数字,三个数字由逗号隔离,CSS
中的定义则由空格分开,每种数字定义了实线段的尺寸,分别是安分守己绘制、不绘制这一个顺序循环下去。

上边是设置了3个、三个、三个数字时虚线的描写情形比较:

图片 21

Step柒、将不一样部位的动画片组成到手拉手

图片 22

参考:

图片 23

他日的饼图


正方形渐变在此地也能够格外有补助。它只须求一个圆产生分,以及包涵两个色标的锥形渐变即可做出饼图。例如,图5中意味五分二的饼图能够那样成功:

图片 24

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

图片 25

2.13 <pattern>标签

<pattern>标签用于自定义一个样子,该造型能够被引用来平铺二个区域。

JavaScript

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

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

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

蒙版

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

XHTML

<svg> <defs> <!– 剪裁的概念 –> <clipPath
id=”cliping”>…</clipPath> <!– 遮罩的概念 –> <mask
id=”mask”>…</mask> </defs>   <!– 剪裁的引用 –>
<circle clip-path=”url(#cliping)”></circle> <!–
遮罩的引用 –> <circle clip-path=”url(#mask)”></circle>
</svg>

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

注:以上代码为了直观反映两者的采纳方式,已去除其他不相干代码,不可直接运转。

剪裁与遮罩的界别在于,剪裁是服从定义的造型界限鲜明地开展图像的显得与潜伏:

而遮罩相较于剪裁,多了渐变呈现图像的职能,只要在 <mask>
中封装渐变的概念就可以。遮罩的显示战术是:

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

所以遮罩的职能实在是带有剪裁的,当遮罩使用的是纯黑的图像时,效用雷同剪裁。

图片 26

虚线的描线动作效果结合剪裁只怕遮罩即能够成功(Codepen):

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<clipPath id="dash" class="dash">
<rect x="0" y="20" width="10" height="34"></rect>
<rect x="20" y="20" width="10" height="34"></rect>
<rect x="40" y="20" width="10" height="34"></rect>
<rect x="60" y="20" width="10" height="34"></rect>
<rect x="80" y="20" width="10" height="34"></rect>
</clipPath>
<mask id="mask-dash" class="mask_dash">
<rect x="0" y="20" width="10" height="34"></rect>
<rect x="20" y="20" width="10" height="34"></rect>
<rect x="40" y="20" width="10" height="34"></rect>
<rect x="60" y="20" width="10" height="34"></rect>
<rect x="80" y="20" width="10" height="34"></rect>
</mask>
</defs>
 
<g clip-path="url(#dash)">
<line class="line" x1="0" y1="28" x2="100" y2="28"></line>
</g>
<g mask="url(#mask-dash)">
<rect x="0" y="36" width="100" height="8" fill="#eee"></rect>
<line class="line" x1="0" y1="40" x2="100" y2="40"></line>
</g>
</svg>

CSS

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

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

留神到下面使用了遮罩的成团里多了一个方形图像,是因为遮罩对于图片尺寸的需要进一步残暴,line
在它的眼底不是事物,不提供别的成效帮助,可是只要加个方形垫背,line
就被接受了[翻白眼]。所以涉及到切割的蒙版,请尽恐怕选用 clipPath

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初步,前边紧跟着八个参数,这7个参数分别用来代表:

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

图片 27

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

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分级用来设置描边色和描边的宽度。

图片 28

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

图片 29

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 文件还是可以转为 BASE6四 编码,然后作为 Data U牧马人I 写入网页。

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

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

SVG 的选定与引用

三种集合标签:<g><symbol><defs>,都以用于将散装的图纸组合成二个整机。差别在于:

更详实的分别见《突袭 HTML5 之 SVG 二D 入门7 –
重用与引用》。

上述三种集合的引用统1行使 <use> 标签。xlink:href 属性内定引用的
id

use 成分的效益进程就也就是把被引述的靶子深拷贝壹份到独门的非公开的
DOM 树中;那棵树的父节点是 use
成分。就算是非公开的DOM节点,不过精神上依然 DOM
节点,所以被引用对象的具有属性值、动画、事件、 CSS
的连带设置等都会拷贝多来并都依然会起成效,而且那么些节点也会承继 use
元素和 use
祖先的相关属性(注意引用成分是深拷贝,这个拷贝过来的因素与原来的因素已经非亲非故系了,所以那里不会三番5遍被引用成分祖先节点的属性),假若这么些节点自个儿有相关(CSS)属性,还会覆盖承袭来的性质,这一个与普通的DOM节点是同样的,所以对use成分使用“visibility:hidden”时要小心,并不一定会起效果。可是出于那壹部分节点是非公开的,在
DOM 操作中,也不得不看看 use 成分,所以也不得不操作到 use 元素。

在 SVG Sprite 中,<use> 的运用比较跋扈(《拥抱 Web 设计新势头:SVG
Coca Colas
实施应用》,同时也波及了
SVG 的非常情状),而当 SVG
图形代码与引用部分分离开时,想针对图形中的某1有个别进行拍卖就会来得尤其勤奋(只可以看看
use 结点),那年,张开 shadow DOM
的展示,包你一览无余(具体操作方法见《神奇的 Shadow
DOM》)。

图片 30

打开了 shadow DOM 显示的 use 标签

下边就来看二个非图形引用的例子。在前面我们领略了,假使要描边动作效果,那修改
stroke-dashoffset 就足以直达效果。但是那种方法本身就是使用了虚线的
hack,假诺我们想要做叁个虚线的描线动作效果呢?比如:

图片 31

这一年 stroke-dasharraystroke-offset
的通力合营是心有余而力不足产生的,因为他们动起来自个儿便是虚线在移动。所以我们必要换个思路,描线动画照旧不行描线动画,只是虚线的绘图需求使用另2个hack —— 蒙版。

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

在3个循环往复里,最后留有百分之三十的时刻维系一个栖息。

图片 32

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);
};
一遍贝塞尔曲线:C x1 y1, x2 y2, x y (或者 c dx1, dy1, dx2, dy2, dx dy)

一回贝塞尔曲线有五个调节点,就是(x1,y1)和(x2,y贰),最前边(x,y)代表曲线的终端。

那一年仍然上动图比较轻松。以上边包车型客车代码段为例:

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

绘制进程如下:

图片 33

(手残,顺滑绘制进程请依旧参考维基君。)

凭借 PS 中的钢笔工具依据扶助线能十分的快画出路径,可避防去那抽象的乘除进度。

图片 34

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

嘴巴是一段圆弧,作者绘制了二个圆,然后描边了其中的一段,并且做了叁个转悠,来让它的角度处高满堂确的岗位。

  • stroke-linecap:用来定义开放路径的扫尾,可选round|butt|square
  • stroke-dasharray:用来创设虚线
  • stroke-dashoffset:设置虚线地方的序幕偏移值,在下一手续里,它会和stroke-dasharray一同用来兑现动作效果。

图片 35

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

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

重重时候,曲线不止一个弧,为了平滑对接,第一个曲线的调控点平常是率先个曲线调节点在曲线其它壹边的映射点。那一年能够利用那个简化版本。

那边要小心的是,如若 S 指令前面未有其余的 S 指令或 C
指令,那年会感到三个调控点是一样的,退化成3回贝塞尔曲线的榜样;假设
S 指令是用在其它2个 S 指令恐怕 C 指令前边,那一年背后那个 S
指令的率先个调控点会暗中认可设置为近年来的那么些曲线的第二个调整点的四个映射点。——《突袭
HTML伍 之 SVG 2D 入门2 –
图形绘制》

此间首要批注一下 S 指令中每一种点对应的职位。同样借用 MDN 上的示范:

XHTML

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

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

图片 36

相关文章

发表评论

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

网站地图xml地图