新司机开车指南,像素艺术

SVG 新司机开车指南

2017/04/10 · HTML5 ·
SVG

原稿出处: Tw93   

SVG 线条动画入门

2016/12/29 · HTML5 ·
SVG,
动画

本文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
欢迎到场伯乐在线 专栏撰稿人。

一般说来咱们说的 Web 动画,包涵了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

个体觉得 3
种动画各有上下,实际使用中依照驾驭境况作出抉择,本文研讨的是自个儿觉得 SVG
中在实质上项目中丰裕有选用价值 SVG 线条动画。

一、栅格图形和矢量图形
栅格图形:也称位图,图像由一组二维像素网格表示。
Canvas 2d API 就是一款栅格图形 API。通过 Canvas API 绘制图形,其实是创新Canvas 的像素。PNG 和 JPEG 是二种栅格图形的格式。即 PNG 和 JPEG
图像中的数据也一如既往代表着像素。
矢量图形:图像由数学描述的几何样子表示。矢量图像包含利用高级几何样子(比如线和形状)绘制图像所需的万事新闻。
SVG 是矢量图形的一种,同 HTML 一样,SVG 是一种文件格式,有谈得来的
API。SVG 同 DOM API 结合形成了一种矢量图形 API。即使可以将 PNG
等栅格图形嵌入到 SVG 中,但从根本上讲,SVG 是一种矢量格式。

原文:fun-times-css-pixel-art

译者:nzbin

友情提示:由于国内网络的原因,CodePen可能会打不开或者非凡慢,请耐心等待!

TL,TR

SVG其有关特性远比想象中要强,本文首先介绍下SVG的连带定义、特点和Demo,接下去会介绍它的连锁语法和动画片,最终告诉我们怎么使用和优化SVG。

担保我们一钟头内得以开车上路….. 来不及解释了,快上车…..

美高梅开户网址 1

举个栗子

SVG 线条动画,在一部分特定的场子下得以缓解选择 CSS
无法做到的卡通片。更加是在进度条方面,看看近日项目里的一个小必要,一个那种形象的进程条:

美高梅开户网址 2

把里面的进程条单独拿出去,也就是须要贯彻那样一个作用:

美高梅开户网址 3

脑洞大开一下,使用 CSS3 如何促成这样一个进度条呢。

CSS3 是足以成功的,就是很麻烦。可是只要利用 SVG 的话,一蹴而就。

See the Pen 窘迫进程条 by
Chokcoco (@Chokcoco) on
CodePen.

咱俩只要你在读书本文的时候有了必然的 SVG
基础,下面代码看看就懂了,好了,本文到此截止。

美高梅开户网址 4

可以吗,如故一步一步解释,上边进程条的重中之重 SVG 代码如下:

<svg version=”1.1″ xmlns=””
xmlns:xlink=”” xml:space=”preserve”
class=”circle-load-rect-svg” width=”300″ height=”200″ viewbox=”0 0 600
400″> <polyline points=”5 5, 575 5, 575 200, 5 200″
class=”g-rect-path”/> <polyline points=”5 5, 575 5, 575 200, 5
200″ class=”g-rect-fill”/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

二、理解 SVG
SVG 的本质特征是它根据 XML。HTML5 引入了内连 SVG,所以 SVG
元素可以直接出现在 HTML 标记中。

像素艺术看作一种遗失的措施样式,与超清晰,高分辨率图片相比暗淡无光。我在
CodePen 上浏览时偶尔发现了有的像素艺术,它唤醒自己那种艺术是何其令人敬畏!

一、简介

SVG 为何

可缩放矢量图形,即SVG,是W3C
XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)

下边代码中,先谈谈 svg 标签:

  • version: 表示 “ 的版本,近日唯有 1.0,1.1 三种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述多少个值固定,表示命名空间,当数码单独存在svg文件内时,这3个值不可能大概
  • class:就是我们耳熟能详的 class
  • width | height: 定义 svg 画布的轻重
  • viewbox: 定义了画布上可以来得的区域,当 viewBox 的轻重缓急和 svg
    不一样时,viewBox 在显示屏上的显示会缩放至 svg
    同等大小(暂时可以不要驾驭)

有了 svg 标签,大家就可以愉悦的在其间添加 SVG 图形了,上面,我在 svg 中定义了三个 polyline 标签。

SVG 和 Canvas 的关键差别:
(1)SVG 绘制的公文可选,而 Canvas 不可能(因为 Canvas
文本用像素绘制,是图像的一有的);
(2)SVG 上的文书是可搜索的,Canvas 上的文书不能被寻找引擎获取。

See the Pen Pikachu pixel css
by Devi Krisdiansyah (@agilBAKA) on
CodePen.

定义

SVG(Scalable Vector
Graphics)是可缩放矢量图形的缩写,基于可伸张标记语言XML来叙述二维矢量图形的一种图形格式,由W3C制定,是一个怒放标准。

SVG 基本造型

polyline:是SVG的一个主导造型,用来创制一多重直线连接多个点。

其实,polyline 是一个比较不常用的形制,相比常用的是pathrectcircle 等。那里我动用polyline 的由来是急需利用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创造圆滑过渡角。

SVG
中定义了有的中央造型,在三番五次下文此前,提议点进去先精通一些焦点图形的标签及写法:

美高梅开户网址 5

HTML 是用来定义页面结构的评释性语言,而 SVG
是用来创建视觉结构的语言。通过 DOM API ,你可以与 SVG 和 HTML
进行互动。SVG 文档是因素结合的树状结构,同 HTML
一样,它支持脚本操作和丰富体制,还足以向 SVG 元素添加事件处理函数。

是或不是很酷?像素化图形中简单温馨,而那是高清晰图形和插图中缺失的。

特点

当今大家得以采纳PNG、JPG来展现静态的图形,使用CSS3、JS或者挫一点的GIF来代表动画,厉害一点大家可以动用Canvas来绘图,那么为何还要采纳SVG呢?

  • 和PNG、GIF比较起来,文件体积更小,且可压缩性强;
  • 是因为拔取XML描述,可以自由的被读取和改动,描述性更强;
  • 新司机开车指南,像素艺术。在拓宽或变更尺寸的情况下其图形质料不会有着损失,与分辨率无关,是可伸缩的;
  • SVG是面向未来 (W3C 标准)的,同时浏览器包容性好;
  • 使用CSS 和 JS能很有利的进展支配,再者可以很随便地叙述路径动画;
  • 和Canvas相比
    • Canvas基于像素,提供2D制图函数,是一种HTML元素类型,看重于HTML,只好通过脚本来绘制图形,Canvas提供的职能比较原始,适合像素处理,动态渲染和天数据量绘制的行使场景;
    • SVG为矢量,提供一名目繁多图片元素(Rect, Path, Circle, Line
      …),还有完整的卡通,事件机制,本身可以独自使用,也可以停放到HTML中,SVG很已经变成了国际标准,功用更完美,适合静态图片体现,高保真文档查看和打印的利用场景;

SVG 线条动画

好,终于到本文的主要了。

美高梅开户网址 6

地点,咱们给八个 polyline 都设置了 class,SVG
图形的一个功利就是局地特性样式可以动用 CSS
的艺术书写,更紧要的是足以包容 CSS 动画一起行使。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6;
stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none;
stroke-width:10; stroke:#ff7700; stroke-linejoin:round;
stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{
stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

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
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

那尼玛是何等
CSS?怎么除了 animation 全都不认识? 美高梅开户网址 7

莫慌,其实过多和 CSS 比较一下极度好精通,只是换了个名字:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css
    中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的体制;
  • stroke-dasharray:值是一组数组,没多少上限,每个数字交替表示划线与间隔的涨幅;
  • stroke-dashoffset:则是虚线的偏移量

重中之重讲讲可以落到实处线条动画的要害属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个和数列,数与数里面用逗号或者空白隔开,指定短划线和缺口的尺寸。假如提供了奇数个值,则这么些值的数列重复四遍,从而成为偶数个值。由此,5,3,2等同于5,3,2,5,3,2

释疑很苍白,直接看例子:

See the Pen stroke-dasharray
by Chokcoco (@Chokcoco) on
CodePen.

上面,填充进程条,使用了上边那一个动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{
stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的长度分别为 0 和
1350,所以一先导全方位图形都是被缺口占据,所以在视觉效果上长度为 0。

接下来对接到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的尺寸分别为
1350 和 1350,因为任何图形的长短就是
1350,所以整个进度条会被逐步填充满。

操纵了这些技术后,就足以行使 stroke-dasharray 和 stroke-dashoffset 制作很多正确的相互场景:

图片 API 设计方面存在多少个山头:
一是即时格局(immediate-mode):图形提供了绘图接口,由 API
接口调用引起的绘图行为会即时爆发。如 Canvas。
二是保存方式(retained-mode):在保存情势图形中,有一个与场景中的视觉对象对应的模子,它会趁机年华的延期而保留下来。可以选用API 操作场景图形,当其改变时,图形引擎会重绘场景。SVG
是一种保留形式图形,其情景图形就是文档。用于操作 SVG 的 API 是 W3C DOM
API。

那也是教大家什么用 HTML 和 CSS
创造像素艺术的一个很好的案例。让大家解析下那几个概念,并创建一个足以在其他情况下行使的情势。

Demo

行使SVG可以做出什么相比有意思的事物吧?

美高梅开户网址 8

前一周社团(臭不要脸插个很硬的广告,阿里飞猪前端团队在招人啦,详细:飞猪寻觅前端同学)有一个小的hackthon,就是经过代码来画这些Loading
GIF,然后就边学边用SVG写了一个一如既往的loadng,体积从后面GIF的33KB变成了864B的SVG,详细见下边:

See the Pen Fliggy Loading by Tw93
(@tw93) on CodePen.

其它一些妙不可言的SVG可以查看30 Awesome SVG Animation For Your
Inspiration这里。

SVG 线条动画落成按钮交互

美高梅开户网址 9

See the Pen
svg线条动画完结按钮交互 by
Chokcoco (@Chokcoco) on
CodePen.

SVG 文档在展现时会保留构成它的矢量新闻,缩放 SVG
时,渲染程序会立马重绘所有组成图像的线条。所以,缩放 SVG
不会招致其质量下滑。而 Canvas
缩放时图像会模糊,原因是图像由像素结合,且不得不在更高分辨率下再一次采样。

创建网格

率先件事,大家需求一张绘制大家像素化小说的画布。大家有多种格局来创制网格。一种方法是接纳专业的
HTML
<table>要素,它的每一行都包含固定宽度的单元格。比如大家画一个八行八列的无微不至的正方形。即使大家设置每一个单元格
10px 宽,那么大家会赢得一个 80X80 的表格。

See the Pen CSS Pixels – Table Grid
Example by Geoff Graham
(@geoffgraham) on
CodePen.

设若想获得更大的画布就给单元格一个更大的尺寸。借使想从 8-bit 分辨率改成
16-bit 的分辨率,只必要将表格的每一行的单元格数量翻倍。

其余一种建立网格的艺术是用七个 div
代替表格。其中一个看成画布的容器;另一个表示画布上的要素,可以根据大家的内需再行很多次。

<div class="canvas">
  <div class="pixel"></div>
  <!-- Repeat as many times as needed -->
</div><!-- end .canvas -->

那种办法需求分明精晓需求创建多少像素块。为此,可以经过将每行的像素数和每列像素数相乘获得。举个例子,如过大家像上边一样想创建80px的正方形,并且期待每行有8个像素点,就可以算出总共需要64个像素点。小说权归小编所有。
经贸转发请联系小编获得授权,非商业转发请表明出处。
原文: ©
w3cplus.com

那种艺术须要鲜明知道要开创多少像素块。为此,能够透过将每行的像素数和每列像素数相乘得到。举例来说,如果和方面一样成立 80px
的正方形,并且希望得到 8X8 像素的网格,就足以算出总共须要 64 个像素点。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 64 total pixels in our HTML */
  width: 10px;
  height: 10px;
  float: left;
}

See the Pen CSS Pixels – Div
Example by Geoff Graham
(@geoffgraham) on
CodePen.

我兴奋这一主意的缘故是它对于大家定义的画布尺寸特别真实。而且自己觉着那种艺术更是简便易行,无需编写来自 table
元素的额外的 HTML 标签。

如果我们想要更加多的像平昔制造更清楚的美术,那么咱们可以在 HTML
标签上校像素数翻两倍,并且将每个像素的尺寸减半。那就犹如你在 Photoshop
中开创了一张你打算在网页中选取的图像,为了取得更高分辨率,你把它的尺码扩充了一倍。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

二、坐标定位

读书SVG语法在此以前,大家得以来询问下SVG的坐标定位,这种坐标种类和大家小时候读书的绘图坐标是倒转的,可是在HTML中都是用如下格局固定。即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

美高梅开户网址 10

SVG 线条动画完结圆形进程条

See the Pen
svg线条动画完毕圆形进程条 by
Chokcoco (@Chokcoco) on
CodePen.

三、使用 SVG 创建 2D 图形
(1)在页面中添加 SVG
添加内联 SVG 到 HTML 页面中如同添加其余因素一样简单。svg
标签的起头标记和得了标记之间,可以增加一些形状和其余视觉对象。还足以在
HTML 中以静态图像的点子引用 SVG 文件,例如:
<code>
<img src=”example.svg”>
</code>
不过那种措施的缺陷是:SVG 文档不可以像内联 SVG 内容那样集成到 DOM
中,即无法编写与 SVG 元素进行相互的本子。
(2)简单的样子
SVG
语言包罗了骨干的形制元素,如矩形、圆形和椭圆。形探花素的尺寸和职分被定义成了性能。如:矩形的性能有
width 和 height。圆形有一个意味半径的 r 属性。和 css 一样,距离单位包括px,em 等。
示例:
<code><svg width=”200″ height=”200″>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red” fill=”#ccc”
/>
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f” fill=”none”
stroke-width=”8″ />
</svg>
</code>
SVG 绘制形状对象时是按对象在文档中出现的顺序进行的。
SVG 实用的坐标连串与 Canvas API 相同,svg
元素的左上角地方的坐标是(0,0)。
(3)变换 SVG 元素
SVG
中多少协会元素,可用来将多个要素构成起来,使它们作为一个完全举办更换或链接。<g>
元素代表“组”(group)。组可以用来整合多少个相关的元素。组内成员可由通用 ID
来引用。其余,组也可以当作一个一个整机举办转换。示例:
<code><svg width=”200″ height=”200″>
<g transform=”translate(-10, 350)”
stroke-width=”20″
stroke-linejoin=”round”>
<path d=”M0,0 Q170,-50 260, -190 Q310, -250 410,-250″
fill=”none” />
</g>
</svg>
</code>
(4)复用内容
SVG 中的 <defs> 元素用于定义留待未来选取的内容(折合 react/vue
中的组件功用类似)。SVG 中的 <use> 元素用于链接到 <defs>
元素定义的始末。借助那七个因素。可以频仍复用同一内容,消除冗余。
示例:
<code><svg width=”200″ height=”200″>
<defs>
<g id=”shapeGroup”>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red” fill=”#ccc”
/>
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f” fill=”none”
stroke-width=”8″ />
</g>
</defs>
<use xlink:href=”#shapeGroup” transform=”translate(20,0) scale(0.5)”
/>
<use xlink:href=”#shapeGroup” transform=”translate(50,0) scale(0.7)”
/>
<use xlink:href=”#shapeGroup” transform=”translate(80,0)
scale(0.25)” />
</svg>
</code>
(5)图案和潜移默化
画画近似于 Canvas 中的背景图做法。渐变也分为线性渐变和放射性渐变,和
Canvas 类似。
示例:
<code><svg width=”200″ height=”200″>
<defs>
<pattern id=”GravelPattern” patternUnits=”userSpaceOnUse” x=”0″ y=”0″
width=”100″ height=”67″ viewBox=”0 0 100 67″>
<image x=”0″ y=”0″ width=”100″ height=”67″
xlink:href:”gravel.jpg”></image>
</pattern>
<linearGradient id=”Gradient”>
<stop offset=”0%” stop-color=”#000″></stop>
<stop offset=”100%” stop-color=”#f00″></stop>
</linearGradient>
</defs>
<rect x=”10″ y=”10″ width=”100″ height=”80″ stroke=”red”
fill=”url(#Gradient)” />
<circle cx=”120″ cy=”80″ r=”40″ stroke=”#00f”
fill=”url(#GravelPattern)” stroke-width=”8″ />
</svg>
</code>
(6)SVG 路径
SVG 不仅包蕴简单的造型,还隐含自由形态的门道。path 元素有一个 d 属性。d
代表数量(data)。在 d
属性的值中,你可以指定一文山会海的路子绘制命令。每条命令都可能包含坐标参数。一些命令的意思为:M
代表移至(moveto),L 代表划线至(lineto),Q 代表二次曲线, Z
代表闭合曲线。
(7)SVG 文本
示例:
<code><svg width=”200″ height=”200″>
<text x=”10″ y=”80″ font-family=”Droid Sans” stroke=”#00f”
fill=”#00f” font-size=”18px”>
hello SVG
</text>
</svg>
</code>

发端画画

咱俩给像素添加颜色在某种意义上说就像是橡胶蒙受路面。大家得以应用 nth-child
属性拔取网格中的元素。

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

正如你想象的那么,那个列表会很长,它取决于网格中的单元格的多寡和规划的细节。小说开端的事例中应用了
1920 个像素并且当先 300 个子类采取器。天哪!

三、元素

多 SVG 图形线条动画协作

前边我司一个 h5
里面应用过的,多SVG 图形线条动画合营,可以制作一些比较酷炫的卡通片,很有科技(science and technology)感。

美高梅开户网址 11

See the Pen JbQNME by Chokcoco
(@Chokcoco) on
CodePen.

本文为止,我在我的 Github 上,使用 SVG 完成了有的图形
— SVG奇思妙想,Demo可以戳那里。

下卷小说将会详述非规则图形,如何行使 PS + AI 生成 path 路径,完结 SVG
动画,放个 Demo,敬请期待。

美高梅开户网址 12

到此本文截止,纵然还有啥问题依旧提议,可以多多互换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏帮忙我写出越多好文章,谢谢!

打赏作者

四、组合场景
全部示例:
<code><svg width=”400″ height=”600″>
<defs>
<pattern id=”GravelPattern” patternUnits=”userSpaceOnUse” x=”0″ y=”0″
width=”100″ height=”67″ viewBox=”0 0 100 67″>
<image x=”0″ y=”0″ width=”100″ height=”67″
xlink:href=”gravel.jpg”></image>
</pattern>
<linearGradient id=”TrunkGradient”>
<stop offset=”0%” stop-color=”#663300″></stop>
<stop offset=”40%” stop-color=”#996600″></stop>
<stop offset=”100%” stop-color=”#552200″></stop>
</linearGradient>
<rect x=”-5″ y=”-50″ width=”10″ height=”50″
id=”Trunk”></rect>
<path d=”M-25, -50
L-10, -80
L-20, -80
L-5, -110
L-15, -110
L0, -140
L15, -110
L5, -110
L20, -80
L10, -80
L25, -50
Z” id=”Canopy”></path>
<linearGradient id=”CanopyShadow” x=”0″ y=”0″ x2=”0″ y2=”100%”>
<stop offset=”0%” stop-color=”#000″
stop-opacity=”.5″></stop>
<stop offset=”20%” stop-color=”#000″
stop-opacity=”0″></stop>
</linearGradient>
<g id=”Tree”>
<use xlink:href=”#Trunk”
fill=”url(#TrunkGradient)”></use>
<use xlink:href=”#Trunk”
fill=”url(#CanopyShadow)”></use>
<use xlink:href=”#Canopy” fill=”none” stroke=”#663300″
stroke-linejoin=”round” stroke-width=”4px”></use>
<use xlink:href=”#Canopy” fill=”#339900″
stroke=”none”></use>
</g>
<g id=”TreeShadow”>
<use xlink:href=”#Trunk” fill=”#000″></use>
<use xlink:href=”#Canopy” fill=”000″ stroke=”none”></use>
</g>
</defs>
<g transform=”translate(-10, 350)” stroke-width=”20″
stroke=”url(#GravelPattern)” stroke-linejoin=”round”>
<path d=”M0,0 Q170,-50 260, -190 Q310, -250 410,-250″
fill=”none”></path>
</g>
<text y=”60″ x=”200″ font-family=”impact” font-size=”60px”
fill=”#996600″ text-anchor=”middle”>
Happy Trails!
</text>
<use xlink:href=”#TreeShadow” transform=”translate(130, 250)
matrix(1, 0, -0.5, 1, 0, 0) scale(1, 0.6)”
opacity=”0.2″></use>
<use xlink:href=”#Tree” transform=”translate(130,
250)”></use>
<use xlink:href=”#TreeShadow” transform=”translate(260, 500)
matrix(1, 0, -0.5, 1, 0, 0) scale(2, 1.2)”
opacity=”0.2″></use>
<use xlink:href=”#Tree” transform=”translate(260, 500)
scale(2)”></use>
</svg>
</code>

一个简便的例证

自己决定做一张像素化的自画像。那些例子很粗略,因为它的像素很少并且总共唯有四种颜色。

See the Pen CSS Pixels – Self
Portrait by Geoff Graham
(@geoffgraham) on
CodePen.

基本功形状

SVG中提供了众多基础元素得以用来绘制基础的形态,譬如矩形、圆形、椭圆、多边形、折线、线条、路径等,同时可以将这几个基础形状组合绘制出复杂的图像。

美高梅开户网址 13

上述基础形状的彰显效果可以经过那么些代码表示出来,详细见下:

See the Pen SVG Basic_Shapes by
Tw93 (@tw93) on CodePen.

打赏帮助自己写出越多好小说,谢谢!

任选一种支付办法

美高梅开户网址 14
美高梅开户网址 15

1 赞 10 收藏
评论

用作Icon的CSS像素艺术

既然大家曾经有了资料,大家得以 使用 transform 性裁减图片把它当做 icon
使用。

See the Pen CSS Pixels – Self Portrait –
Icon by Geoff Graham
(@geoffgraham) on
CodePen.

任何主要因素

  • svg:SVG的根元素,并且可以相互嵌套;
  • 美高梅开户网址,g:用来将SVG中的元素举行分组操作,分组后得以用作一个独门的样子,统一开展转移,同时g元素的体裁可以被子元素继承,不过它从不X,Y属性,不过可以经过transform来移动它;
  • def:用于定义在SVG中可选择的因素,def元素不会一贯呈现出来,可以经过use元一直引用;
  • use:通过它来复用def元素,也囊括、元素,使用即可调用;
  • text:能够用它来兑现word中的那种“艺术字”,很神奇的一个效果;
  • image:用它可以在SVG中嵌套对应的图样,并得以在图纸上和四周做相应的拍卖;

关于作者:chokcoco

美高梅开户网址 16

经不住小运似水,逃可是此间少年。

个人主页 ·
我的稿子 ·
63 ·
   

美高梅开户网址 17

其他的像素绘制技术

四、样式

可以类比于在切页面进程中,大家需求将我们画好的局面举行描边、填色、有时候还要投入渐变效果、转换、裁剪、等效率。

box-shadow

你能够用一个因素通过复杂的 box-shadow
属性绘制像素艺术。假使你声美素佳儿(Friso)个 box-shadow
的垂直和水准偏移,而从不歪曲值及影子半径,你将收获一个方可轻易活动的因素造型的五彩复制体。

以下是概念实例。蓝色元素是始于形状,我早就在左下角创制了一个粉色像素以及在右下角创制了一个革命像素。

See the Pen Basics of Pixel
Art by Chris Coyier
(@chriscoyier) on
CodePen.

您可以疯狂的利用那种艺术绘制整个图案。

See the Pen Pixel Hellboy by
servin (@servinlp) on
CodePen.

轮廓 stroke

stroke用于安装绘制对象线条的水彩,同时stroke有如下属性:

  • stroke-width:设置概略的涨幅;
  • stroke-linecap:设置概略结尾处的渲染格局,value有butt(直接一刀切断)、square(保留少数隔离)、round(圆弧切断)
    3个设置值;
  • stroke-linejoin:用于安装两条线之间的总是情势,value有miter(尖角连接)、round(圆弧连接)、bevel(切断连接)
    3个设置值;
  • stroke-opacity:用于安装描边的不透明度;
  • stroke-dasharray +
    stroke-dashoffset:stroke-dasharray用于选择虚线展现SVG形状的描边,要求提供一个数值数组来描述,定义破折号和空格的长度;stroke-dashoffset用于安装虚线形式中的开端点;

预处理

变量可以更便于地调动颜色和尺寸等。

以下是 less 编写的事例。

See the Pen Pixel-art hipster
pacwoman by Mario Sanz
(@msanz) on CodePen.

那是 Una Kravets 编写的事例, 他更进一步地动用 Sass map 成立box-shadow,很了然的措施。

// Setting the colors we're syncing up with
$pixel-color-map: (
  'r' : #f00,
  'w': #fff,
  'k': #000,
  'o': transparent,
  't': #83401f,
  'p': #ffbc77,
  'b': #06f,
  'y': #ff0,
  'n': #ff8000,
  'g': #5ac528
);

// Mario pixel art matrices!
$pixel-art:(
  mushroom: (
    (o o o o o k k k k k k o o o o o)
    (o o o k k r r r r w w k k o o o)
    (o o k w w r r r r w w w w k o o)
    (o k w w r r r r r r w w w w k o)
    (o k w r r w w w w r r w w w k o)
    (k r r r w w w w w w r r r r r k)
    (k r r r w w w w w w r r w w r k)
    (k w r r w w w w w w r w w w w k)
    (k w w r r w w w w r r w w w w k)
    (k w w r r r r r r r r r w w r k)
    (k w r r k k k k k k k k r r r k)
    (o k k k w w k w w k w w k k k o)
    (o o k w w w k w w k w w w k o o)
    (o o k w w w w w w w w w w k o o)
    (o o o k w w w w w w w w k o o o)
    (o o o o k k k k k k k k o o o o)
  )
);

有很多函数可以把它转换成box-shadow并且利用它。上边是最后结出。

See the Pen Sass-Generated Box Shadow Pixel
Art! by Una Kravets
(@una) on CodePen.

纪事box-shadow也足以做动画。

See the Pen Ash and Pikachu box-shadow Pixel
Art by Andrew
(@AstroDroid) on
CodePen.

填充 fill

fill用来讲述SVG对象内部的水彩,除此还有如下多少个特性:

  • fill-opacity:用于安装填充颜色的不透明度;
  • fill-rule:用于安装填充的法子,value有nonzero、evenodd 多少个值;
  • nonzero:从一个点往任何方向上绘制一条射线,形状中的路径每回穿过此射线时,借使路径从左到右穿过射线,则计数器加1,借使路径从右到左穿过射线,则计数器减1。计数器总数为0时候,则该点被认为在路径外。要是计数器非0,则该点被认为在路径内;
  • evenodd:从一个点往任何方向上绘制一条射线。每一次路径穿过射线,计数器加1。若是总数是偶数,则点在外部。即使统计数为奇数,点在造型内;

canvas

<canvas> 定可以绘制矩形。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(53, 41, 15)";
ctx.fillRect(48, 0, 8, 8);
ctx.fillStyle = "rgb(238, 187, 68)";
ctx.fillRect(56, 0, 8, 8);

See the Pen Canvas Ark from
Terranigma by Max
(@MyXoToD) on CodePen.

变换 transform

此属性和css3中的transform相类似,有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换,请联想高校线性代数
)那个变换,同时可以将它们构成展开转移。

其它还有渐变、遮罩、裁剪等属性,详细请参考:linearGradient,mask,clipPath。

svg

虽然 <svg> 有 <rect>
,可是你可以投机取巧使用带有更加多像素的 <polygon>

See the Pen Pixel me by Aloïs De
Schepper (@Alo62) on
CodePen.

五、动画

在SVG中卡通元素主要分为如下4类,同时也足以自由组合。

  • set:用于安装延迟,譬如设置5s后元素地方颜色变化,不过此元素没有动画效果;
  • animate:基础动画属性,用于落到实处单属性的卡通过度效果;
  • animateTransform:完结transform变换动画效果,可以类比CSS3中的transform;
  • animateMotion:达成途径动画效果,让要素沿着对于path运动;

有了元素之后还亟需有相应的性能用来表示动画的特点,譬如:要动画的要素属性名称、起头值、停止值、变化值、开头时间、截至时间、重复次数、动画速度曲线函数等等。

美高梅开户网址 18

动画片有许多地方都很奇异,大家可以多多尝试。

See the Pen SVG animation by Tw93
(@tw93) on CodePen.

3D!

行吗,我想我们曾经做得够多了。

See the Pen 3D Pixel Art by cx20
(@cx20) on CodePen.

六、使用办法

我们得以动用如下4种常用的点子来加载大家的SVG,此处可以将svg转换成base64的法门。

该你了

咱俩会一直敬服于您以团结的不二法门工作,但须要精晓现在早已有了无数绘制像素图的工具。

  • Ludvig Lindblom’s Canvas box-shadow pixel art
    generator
  • Jenn Schiffer’s make 8-bit art!
  • XOXCO’s Make Pixel Art

通过Img标签:

XHTML

<img src=”tw93.svg” alt=”Hello SVG” height=”65″ width=”68″>

1
<img src="tw93.svg" alt="Hello SVG" height="65" width="68">

通过CSS background:

CSS

.logo { background: url(“data:image/svg+xml;base64,[data]”); }

1
2
3
.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

通过object:

XHTML

<object type=”image/svg+xml”
data=”data:image/svg+xml;base64,[data]”> fallback </object>

1
2
3
<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

直白内置到Html中:

XHTML

<svg xmlns=”” viewBox=”0 0 68 65″>
<path fill=”#1A374D” d=”M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12
15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9
0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z”/> <path d=”M14
27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2
20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7
7-3.1 7-7 7z”/> </svg>

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

前三种方法常用于SVG图片已经定型,并且改动很少的景观,通过单独的SVG文件更好进行田间管理,同时可以削减HTML元素;内置的方式常用于SVG必要常修改或者还未曾确定的意况,尤其浮动修改和尊敬。

七、优化和工具

SVGO

SVG Optimizer is a Nodejs-based tool for optimizing SVG vector
graphics files.

SVGO一个相比厉害的回落优化SVG的工具,可以将大家编辑的SVG中的无用音信,同时对代码举办削减,项目地址:。

美高梅开户网址 19

SVGOMG

SVGOMG是SVGO的可视化界面工具,操作起来很有利,同时还提供了一部分任何有效的功力,展示地点:SVGOMG
– SVGO’s Missing GUI

美高梅开户网址 20

Snap.svg

The JavaScript SVG library for the modern web.

Snap.svg是一个可以使你操纵SVG资源和jQuery操作DOM一样不难的类库,可以写出更为扑朔迷离的SVG效果,同时文档超级齐全,推荐给想浓厚驾驭的校友,项目地址:Snap.svg
– Home,下图就是使用Snap.svg来兑现的。

See the Pen Interactive Illustration via
Snap by Tw93
(@tw93) on CodePen.

Convert image to the SVG format

大家可以通过那么些转换平台,将一般图片转成SVG的格式,不过此间转换可能结果不是大家想要的,可是足以将其看成初成品,在此基础上在拓展调整优化,末了兑现SVG的变换。平台地址:

完,欢迎我们指教和议论。

1 赞 9 收藏
评论

美高梅开户网址 21

发表评论

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

网站地图xml地图