您的位置: 首页  >  文章  >  SVG 新司机开车指南

SVG 新司机开车指南

分类: 文章 • 2023-11-13 19:04:46

（点击上方蓝字，快速关注我们）


作者：Tw93 

tw93.github.io/2017-01-26/SVG.html

如果好文章投稿，点击 → 了解详情


TL,TR


SVG其相关特性远比想象中要强，本文首先介绍下SVG的相关定义、特点和Demo，接下来会介绍它的相关语法和动画，最后告诉大家如何使用和优化SVG。


确保大家一小时内可以开车上路….. 来不及解释了，快上车…..


SVG 新司机开车指南


一、简介


定义


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


特点


现在我们可以使用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很早就成为了国际标准，功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景;


Demo


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


SVG 新司机开车指南


上周团队有一个小的hackthon，就是通过代码来画这个Loading GIF，然后就边学边用SVG写了一个相同的loadng，体积从之前GIF的33KB变成了864B的SVG，详细见下面：


http://codepen.io/tw93/pen/oBYGrZ/


另外一些有趣的SVG可以查看30 Awesome SVG Animation For Your Inspiration（http://www.hongkiat.com/blog/svg-animations/）这里。


二、坐标定位


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


SVG 新司机开车指南


三、元素


基础形状


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


SVG 新司机开车指南


以上基础形状的展示效果可以通过这些代码表示出来，详细见下：


http://codepen.io/tw93/pen/BpmeQx/


其他重要元素


  • svg：SVG的根元素，并且可以相互嵌套；

  • g：用来将SVG中的元素进行分组操作，分组后可以看成一个单独的形状，统一进行转换，同时g元素的样式可以被子元素继承，但是它没有X,Y属性，不过可以通过transform来移动它；

  • def：用于定义在SVG中可重用的元素，def元素不会直接展示出来，可以通过use元素来引用；

  • use：通过它来复用def元素，也包括、元素，使用即可调用；

  • text：可以用它来实现word中的那种“艺术字”，很神奇的一个功能；

  • image：用它可以在SVG中嵌套对应的图片，并可以在图片上和周围做对应的处理;


四、样式


可以类比于在切页面过程中，我们需要将我们画好的框框进行描边、填色、有时候还要加入渐变效果、转换、裁剪、等效果。


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


填充 fill


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


  • fill-opacity：用于设置填充颜色的不透明度；

  • fill-rule：用于设置填充的方式，value有nonzero、evenodd 两个值;

  • nonzero：从一个点往任何方向上绘制一条射线，形状中的路径每次穿过此射线时，如果路径从左到右穿过射线，则计数器加1，如果路径从右到左穿过射线，则计数器减1。计数器总数为0时候，则该点被认为在路径外。如果计数器非0，则该点被认为在路径内;

  • evenodd：从一个点往任何方向上绘制一条射线。每次路径穿过射线，计数器加1。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内;


变换 transform


此属性和css3中的transform相类似，有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换，请联想大学线性代数

相关推荐