数据可视化基础——SVG 简介
可缩放矢量图形 Scalable Vector Graphics,SVG 是一个由万维网联盟 W3C 自 1999 年开始开发的基于文本的开放标准,是一种基于 XML 的标记语言,用于描述二维的矢量图形,它能渲染三种类型的图形对象:矢量图形、位图、文本,并和 CSS、DOM、JavaScript 等其他网络标准无缝衔接。
???? 所有的现代浏览器都支持SVG,但支持的版本可能不同,在 Can I use 上有一份比较详细的支持 SVG 的浏览器列表。很多图形处理软件提供可视化交互界面操作 .svg
格式的文件,如 Inkscape 和 Adobe Illustrator。
一个简单的 SVG 文档由 <svg>
根元素和基本的形状元素构成,在前端开发中一些简单的图形也可以手动编写 <svg>
标记来实现。
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- more tags here --> </svg> 复制代码
???? SVG 基于 XML 的标记语言,因此区分大小写,而且 SVG 里的属性值必须用引号引起来,就算是数值也必须这样做
???? 每一个 SVG 元素都应该声明命名空间 xmlns
,以解决不同 XML 方言(SVG 是 XML 一种「方言」)混合使用产生的问题。以上示例 xmlns
属性意味着这个 <svg>
标签和它的子节点都属于 http://www.w3.org/2000/svg
这个 SVG 命名空间。命名空间仅仅只是一些字符串,因为 URIs 的唯一性从而被广泛使用,但它的本意并不是要「链接」到某个地址。
坐标定位
SVG 绘制图形时需要使用坐标系统/网格系统:
以页面的左上角为
(0,0)
坐标点,坐标以像素为单位x 轴正方向是向右
y 轴正方向是向下。
viewport 和 viewBox
viewport 视口是一个表示当前可见的计算机图形区域的概念。在 Web 浏览器术语中通常与浏览器窗口相同,但不包括浏览器的 UI(如菜单栏等),视口外的内容在被滚动进来前都是不可见的。在 SVG 概念中,它相当于
<svg>
元素的大小viewBox 是
<svg>
标签的一个属性,包含四个参数(以空格或逗号分隔)<svg viewBox="min-x min-y width height">
指定一个容器(宽和高)以显示图形元素,相当于规定了在<svg>
元素中哪些部分是可视的,即设置了一个缩放和平移的初始状态设定不同的
viewBox
属性值可以实现类似于缩放或平移的效果。修改容器的min-x
和min-y
可以实现整体「移动」容器内元素的效果;修改容器width
和height
可以实现整体「缩放」容器内元素的效果。???? 在
<svg>
标签内的元素的坐标和宽度如果使用数值(而不带单位)时,就会以viewBox
属性设定的值作为相对定位和相对单位。min-x
和min-y
指定了容器的左上角的坐标,即定义了父元素的坐标系统(设置了平移的初始状态)width
和height
指定容器的宽和高(设置了缩放的初始状态)
<svg width="200" height="200" viewBox="0 0 100 100"> 复制代码
这里定义的画布尺寸是 200*200px
。但是 viewBox
属性定义了画布上可以显示的区域:从 (0,0) 点开始,100*100
的区域。这个区域会放到 200*200
的画布上显示,于是就形成了放大两倍的效果。
<!-- svg 元素大小相同 --> <svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"> <!-- 较大的 viewBox,这样在容器内的圆的半径长度 4 是以 30 为基准进行解析,在该容器中图像就显得小 --> <circle cx="50%" cy="50%" r="4" fill="orange"/> </svg> <svg style="width: 200px; height:200px; border:5px blue solid" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- 较小的 viewBox,这样在容器内的圆的半径长度 4 是以 10 为基准进行解析,在该容器中图像就显得大 --> <circle cx="50%" cy="50%" r="4" fill="orange"/> </svg> 复制代码
???? 在 codepen 查看代码效果
???? viewBox 和 viewport 可能不一致,但有时候希望通过强制缩放,让 viewBox 铺满 viewport,可以使用属性 preserveAspectRatio
将图形拉伸占据整个视口,该属性设置拉伸过程中的长宽比例,以保持图形不变形
作者:Benbinbin
链接:https://juejin.cn/post/7025415537110810632