svg 介绍

html-css011

svg 介绍,第1张

svg 是『矢量图』,相比于『位图』,矢量图的特点是不会随着图片放大而失真,能做到这一点,主要是由于矢量图存储的内容是对『图形的描述』

svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中,svg 标签的作用有点像 canvas,充当绘制图形的画布。如果绘制的图形超出了画图,则会被截断。

svg 提供一些标签来表达常用的基本图形,如 <circle/><rect/><ellipse/><line/><polygon/><polyline/><path/>,分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。

表达图形的具体属性不作介绍,请自行查阅资料。

有些属性可以放在CSS中:

有些则只能写在标签里,如下:

path 是一个更强大的 API,可以画出上面几种基本图形,还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

有一些东西没有提到,比如 transform 变换:包括旋转、平移、缩放等,你可以自行去了解。

上文中的示例: 链接

SVG教程 | MDN

SVG 教程 | 菜鸟教程

SVG(可缩放矢量图形),是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。:root,匹配文档的根元素。在HTML中,根元素永远是HTML:not(selector),选择器匹配非指定元素/选择器的每个元素。合起来就是,svg非根元素的元素(以上都是搜索回来的,仅供参考)