背景
前端开发过程中经常会接触SVG格式的图像,且相较于其他格式图像,SVG为代码形式。前端开发人员若掌握一些基本的SVG语法,可以在绘制一些页面上的图形时具有更高的效率,更少且可读性更高的代码。
概述
- SVG意为可缩放矢量图形
- SVG使用XML格式定义图像
- SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG是W3C推荐标准
特征
- 相比JPEG、GIF等图像格式,尺寸更小,可伸缩性更强
- 可伸缩,不因尺寸影响图形质量
- 文本可选且可搜索
- 可以与JavaScript技术一起运行
- 是纯粹的XML(XML是什么)
SVG元素
SVG根元素
<svg></svg>
- 常用属性
- width
- height
SVG矩形
<rect/>
- 常用属性
- width
- height
- fill 矩形的填充颜色
- style css属性
- stroke 矩形边框颜色【stroke详情】
(stroke详情) - rx ry 矩形圆角
- 示例
<svg width="500" height="100">
<rect x="10" y="10" width="150" height="50" rx="20" ry="20" fill="orange" stroke="red" />
</svg>
SVG圆形
<circle/>
- 常用属性
- cx cy 圆点坐标,若省略则为 (0, 0)
- r 圆的半径
- 示例
<svg width="500" height="100">
<circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="orange" />
</svg>
SVG椭圆
<ellipse/>
- 常用属性
- rx ry 椭圆的水平半径与垂直半径
- 示例
<svg width="500" height="100">
<ellipse cx="100" cy="50" rx="50" ry="30" stroke="red" stroke-width="2" fill="orange" />
</svg>
SVG直线
<line/>
- 常用属性
- x1 y1 直线的开始位置坐标
- x2 y2 直线的结束位置坐标
- 示例
<svg width="500" height="100">
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="3" />
</svg>
SVG多边形
<polygon/>
- 常用属性
- points 组成多边形各个点的坐标
- 示例
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" fill="orange" stroke="red" />
</svg>
SVG多线段
<polyline/>
- 常用属性
- points 线段各节点坐标
- 示例
<svg width="500" height="100">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="#fff" stroke="red" />
</svg>
SVG路径
<path/>
- 常用属性
- d 轨迹
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
- d 轨迹
- 示例
<svg width="500" height="200">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
SVG文本
<text></text>
- 常用属性
- x y 文字位置
- transform 旋转、缩放、倾斜、平移
- 示例
<svg width="500" height="100">
<text x="10" y="30" fill="red" transform="rotate(30 20,40)" style="font-size: 30px; font-weight: 800;">study SVG</text>
</svg>
stoke属性
- stroke
定义一条线,文本或元素轮廓颜色 - stoke-width
定义了一条线,文本或元素轮廓厚度 - stroke-linecap
定义不同类型的开放路径的终结
<svg width="500" height="100">
<g fill="none" stroke="red" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
- stroke-dasharray
用于创建虚线
<svg width="500" height="100">
<g fill="none" stroke="red" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
其他技巧
g标签的使用
- 改变位置
g 标签仅仅作为组合其他svg标签的容器,其本身无法设置x,y等属性,若需要改变该容器位置,可以考虑使用transform: translate写法
<g transform="translate(15, 15)">...</g>
- 获取宽高
g标签无法通过offsetWidth/offsetHeight、ClientWidth/ClientHeight
获取元素宽高(获取结果为undefined)。即普通的DOM获取方法不适用于svg元素。
可以使用getBoundingClientRect()
方法
document.getElementById('g1').getBoundingClientRect()
获取结果为一个对象,里面包含元素宽高等各项信息。
svg标签的嵌套使用
-
问题描述
实际使用svg绘图时会遇到以下问题:当对svg标签内的元素使用百分比
进行定位或设置长度时,此百分比均是基于svg画布本身大小,而非其父级元素大小。但部分情况下需要以局部为总体进行百分比布局。 -
解决方法
在svg标签内新增svg标签嵌套处理,改变子元素对应的画布,并改变内层svg画布的位置与大小以满足需求。 -
注意事项
由于svg标签空间范围外的元素会被隐藏,因此需要注意每一层画布的大小及位置,防止部分元素消失的问题。
实际运用
将以上基本的svg元素运用到实际页面的图形绘制开发中,例如在甘特图中时间轴、进度条等样式布局的开发,详细内容:
【个人甘特图组件开发】
参考资料
原文地址
【个人博客】