1. 介绍
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其可以直接被插入到网页 DOM 中,甚至作为CSS背景属性等,且无论放大多少倍,图像都不会失真。D3.js 正是操作各种svg 元素,将他们拼接成一幅幅精美的图件,因此了解常用的svg元素和属性是学习 D3.js 的必要条件。
2.常用的svg标签
<svg>
标签
svg
标签是顶层标签,所有 svg 标签和代码都必须放在<svg>
标签中,width
和 height
属性可指定画布大小,xmlns
属性则是用于声明命名空间,防止来自不同技术的元素发生冲突。viewBox
则是指定视口位置和大小,其属性值由 4 个数字组成,分别是视口左上角的横坐标和纵坐标、视口的宽度和高度(svg 元素的左上角坐标默认为0, 0
)
<svg width="100" height="100" viewBox="50 50 50 50" xmlns="http://www.w3.org/2000/svg">
svg代码写在这里.....
</svg>
<line>
标签
line
标签用于绘制一条直线,众所周知,一条直线由两个点确定,因此该标签具有 x1
、y1
、x2
、y2
属性,分别表示线段起始点和终点的横纵坐标。
<line x1="0" y1="0" x2="100" y2="100" />
<rect>
标签
rect
标签则用于绘制一个矩形,其 x
和 y
属性分别指定了矩形左上角顶点的横纵坐标,而 width
和 height
属性则指定了矩形的宽度和高度。
<rect x="0" y="0" height="100" width="100" />
<polygon>
标签
polygon
标签用于绘制一个多边形(必须具备三个顶点或以上),其 points
属性指定了多边形每个顶点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间则用空格分隔。
<polygon points="0,0 100,0 100,100 0,100 0,0"/>
<circle>
标签
circle
标签用于绘制一个圆形,具有cx
、cy
和r
属性,分别代表圆心的横纵坐标以及圆形的半径。
<circle cx="50" cy="50" r="25" />
<ellipse>
标签
ellipse
标签用于绘制一个椭圆,具有cx
、cy
、rx
和ry
属性,分别代表圆心横纵坐标以及椭圆的横纵向轴半径
<ellipse cx="50" cy="50" ry="40" rx="20" />
<path>
标签
path
标签用于绘制路径,其是 svg 基本形状中最强大的一个,你可以用它创建线条,曲线,弧形,圆等各种形状,其具有 d
属性,用于指定一系列绘制的命令,命令后面接坐标。
常用命令包括:M
(移动绘制点到某坐标)、L
(绘制一条直线)、H
(绘制一条水平线)、V
(绘制一条竖线)、Q
(绘制一条二次贝塞尔曲线)、C
(绘制一条三次贝塞尔曲线)、Z
(闭合)。以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
从坐标(150, 0)绘制一条直线到坐标(75,200),然后再从(75,200)绘制直线到坐标(225,200)
,最后闭合回到(150, 0)
<path d="M150 0 L75 200 L225 200 Z" />
因此 path
标签最后呈现什么样子,完全取决于你的一系列命令,不同的形状绘图命令可以简单也可以很复杂,但是不用担心,D3.js 的内置的一些形状 API 能自动生成 path
标签,无需你手动书写 d
属性。
<text>
标签
顾名思义,text
标签用于绘制文本,其具有x
、y
、dx
、dy
和 text-anchor
属性,分别代表文本标签的的横纵坐标、文本水平方向和垂直方向的偏移量,以及文本的对齐方式
在坐标(100, 100)绘制一句文本,且文本对齐方式为居中对齐
<text x="100" y="100" text-anchor="middle">Hello World</text>
<g>
标签
g
标签用于将多个形状捆绑一个组(group),在 g
标签上定义的属性,会被其所有的子元素继承,添加到g元素上的变换也会应用到其所有的子元素上
将所有圆都充填为蓝色
<g fill="blue">
<circle cx="25" cy="25" r="20" id="1"/>
<circle cx="50" cy="50" r="20" id="2"/>
</g>
<image>
标签
image
标签用于插入图片,width
和 height
属性指定图片大小,xmlns:xlink
属性指定图片 url
<image xlink:href="path/to/image.jpg" width="100" height="100"/>
以上就是 svg 最常用的几个标签,除此之外,svg 还具有 <defs>
、<use>
、<pattern>
、<animate>
等众多标签,但由于日常使用较少,到用的时候去查找就好了,在此就不每个都介绍了,有兴趣的同学请参考这里
3.svg标签常用属性
id
属性
svg 元素的唯一标识,与 html 元素类似
class
属性
svg 元素的 class 标识,常用于css样式设置,与 html 元素类似
stroke
属性
定义 svg 元素的描边颜色,例如线条、文本等描边颜色
stroke-width
属性
定义 svg 元素的描边宽度
stroke-opacity
属性
定义 svg 元素的描边透明度
fill
属性
定义 svg 元素的填充颜色
fill-opacity
属性
定义 svg 元素的填充透明度
transform
属性
定义 svg 元素的变换,包括移动、旋转、放缩等,与CSS类似,例如
将圆顺时针旋转30度,向左平移30,向下平移40,缩小成原来的0.5倍
<circle cx="25" cy="25" r="20" transform="rotate(30) translate(-30 40) scale(0.5)" />
以上就是 svg 元素最常用的几个属性,还有一些属性用的较少,等需要的时候再去查找就好了,而对于字体颜色、大小等是通过CSS样式设置的