-
未登录
热门文章
本章介绍用于描述图像和绘制图形的标记语言 SVG，SVG 使用 XML 的语法标准，用于绘制和定义矢量图形，它符合 w3c 的标准。SVG 全称 scalable vector graphics ，使用它可以绘制三种类型的图形：矢量图形、图像、文本。SVG 是一整套矢量图形绘制协议，放在 HTML 中也可以是一个标准的 HTML 元素
SVG 在既能满足现有图片的功能的前提下，又是矢量图，在可访问性上面也非常不错，并且有利于 SEO 和无障碍，在性能和维护性方面也比 icon，font 要出色许多，简单的理解，它是图形的另一种格式例如它和常见的图片格式 png、jpg、gif 等是一类。
使用 rect 表示矩形，例如：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<rect x="60" y="10" rx="10" ry="10" width="150" height="150"/>
</svg>
包含6个属性
使用 circle 表示圆形：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<circle cx="125" cy="175" r="120"/>
</svg>
其中包含 3 个属性
使用 ellipse 标签表示椭圆：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<ellipse cx="175" cy="175" rx="120" ry="50"/>
</svg>
其中包含 4 个属性
使用 line 元素表示直线：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<line xmlns="http://www.w3.org/2000/svg" x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
它包含 4 个属性
使用 polyline 表示折线：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<polyline points="0,170 484,170 88,440 240,4 391,439 0,170" fill-opacity="0.5" fill="red"></polyline>
</svg>
使用 points 属性表示折线的一系列的中间点：
使用 path 表示路径：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 20 230 Q 40 1205, 150 530 T 90230"/>
</svg>
使用这个元素可以实现任何其他图形。
和使用图片相比，SVG 有很多优点：
总的来说 SVG 拥有很多优点，但是其复杂的语法决定了它的入门门槛较高。
Canvas 是通过 JavaScript 调用的方式绘制图像，而 SVG 是使用标签的方式绘制图像，所以两种的渲染方式有很大差别。
直接使用 SVG 来绘制一个较复杂的图形的话可能入门门槛较高，使用第三方类库可以节省不少代码量，在这里推荐一个比较常用的 SVG 的类库 snap.svg，它的 GitHub 地址是 snap.svg。
<script src="https://wiki-code.oss-cn-beijing.aliyuncs.com/html5/js/snap.svg-min.js"></script>
<svg id="demo1" width="1000" height="1000"></svg>
<script> let svg = Snap('#demo1'); let circle = svg.select('.circle'); //如果SVG中已有实际图形元素，直接选择器初始化 // 1S内矩形围绕矩形的中心旋转100次，完成旋转一周，动画效果是缓出 let rect = svg.paper.rect({x: 200, y: 200, width: 200, height: 200, fill: '#f00'}); Snap.animate(0, 100, (val) => { let m = new Snap.Matrix(); m.rotate((val/100)*360, 300, 300); // 注意，旋转中心是矩形的中心 rect.transform(m); // 在rect节点应用matrix }, 1000, mina.easeout(), () => { }); </script>
上述代码使用 snap.svg 实现了一个图形旋转。
回顾本章介绍了 HTML 中的矢量图形绘制语言 SVG，已经 SVG 的适用场景以及和 Canvas 的对比。