当前位置:3016.com-金沙城中心官网 > 前端 > SVG 新司机开车指南

SVG 新司机开车指南

文章作者:前端 上传时间:2019-10-14

二、坐标定位

学习SVG语法之前,我们可以来了解下SVG的坐标定位,这种坐标系统和我们小时候学习的绘图坐标是相反的,但是在HTML中都是用如下方式定位。即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

图片 1

五、动画

在SVG中动画元素主要分成如下4类,同时也可以自由组合。

  • set:用于设置延迟,譬如设置5s后元素位置颜色变化,但是此元素没有动画效果;
  • animate:基础动画属性,用于实现单属性的动画过度效果;
  • animateTransform:实现transform变换动画效果,可以类比CSS3中的transform;
  • animateMotion:实现路径动画效果,让元素沿着对于path运动;

有了元素以后还需要有对应的属性用来表示动画的特征,譬如:要动画的元素属性名称、起始值、结束值、变化值、开始时间、结束时间、重复次数、动画速度曲线函数等等。

图片 2

动画有很多地方都很新鲜,大家可以多多尝试。

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

定义

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

轮廓 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用于设置虚线模式中的开始点;

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.

SVGO

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

SVGO一个比较厉害的压缩优化SVG的工具,可以将我们编写的SVG中的无用信息,同时对代码进行压缩,项目地址:。

图片 3

SVGOMG

SVGOMG是SVGO的可视化界面工具,操作起来很方便,同时还提供了一些其他有用的功能,展示地址:SVGOMG – SVGO’s Missing GUI

图片 4

七、优化和工具

一、简介

通过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>

其他重要元素

  • svg:SVG的根元素,并且可以相互嵌套;
  • g:用来将SVG中的元素进行分组操作,分组后可以看成一个单独的形状,统一进行转换,同时g元素的样式可以被子元素继承,但是它没有X,Y属性,不过可以通过transform来移动它;
  • def:用于定义在SVG中可重用的元素,def元素不会直接展示出来,可以通过use元素来引用;
  • use:通过它来复用def元素,也包括、元素,使用即可调用;
  • text:可以用它来实现word中的那种“艺术字”,很神奇的一个功能;
  • image:用它可以在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很早就成为了国际标准,功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;

填充 fill

fill用来描述SVG对象内部的颜色,除此还有如下两个属性:

  • fill-opacity:用于设置填充颜色的不透明度;
  • fill-rule:用于设置填充的方式,value有nonzero、evenodd 两个值;
  • nonzero:从一个点往任何方向上绘制一条射线,形状中的路径每次穿过此射线时,如果路径从左到右穿过射线,则计数器加1,如果路径从右到左穿过射线,则计数器减1。计数器总数为0时候,则该点被认为在路径外。如果计数器非0,则该点被认为在路径内;
  • evenodd:从一个点往任何方向上绘制一条射线。每次路径穿过射线,计数器加1。如果总数是偶数,则点在外部。如果总计数为奇数,点在形状内;

通过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">

Demo

使用SVG可以做出什么比较好玩的东西呢?

图片 5

上周团队(

本文由3016.com-金沙城中心官网发布于前端,转载请注明出处:SVG 新司机开车指南

关键词: