什么是SVG
可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形,基于 XML 的标记语言。作为一个基于文本的开放网络标准,SVG 能够优雅而简洁地渲染不同大小的图形,并和CSS,DOM,JavaScript和SMIL等其他网络标准无缝衔接。
SVG 图像及其相关行为被定义于 XML 文本文件之中,这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外,这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式,像JPEG和PNG不同,SVG 格式提供的是矢量图,这意味着它的图像能够被无限放大而不失真或降低质量,并且可以方便地修改内容。
为何用SVG
由于SVG的矢量特性,不失真,而且支持JavaScript操作进行编辑和修改,譬如动态改变颜色、大小等场景。
为何用纯JavaScript编写SVG
在需要动态插入SVG,或者需要编写组件的icon
时,或者没有条件写HTML的情景时(譬如只有一个提供JavaScript脚本的入口,没有其他入口时)。
现成的SVG
有时我们可以利用第三方的图标库来实现我们的需求,譬如iconfont。我们可以在上面搜索相应图标,进行下载,如下图所示:
可以下载下来打开看看SVG的内容,也可以直接复制SVG代码,差别是前者是一个svg文件,多了一些容器和公共样式定义。后者是一个svg元素。
实现写入SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg</title>
</head>
<body>
</body>
<script type="module">
// 封装一个函数用于生成SVG的元素节点
function _createSvg(tag, obj) {
//SVG节点要带命名空间'http://www.w3.org/2000/svg'
const oTag = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const attr in obj) {
oTag.setAttribute(attr, obj[attr]);
}
return oTag;
}
const div = document.createElement('div')
div.style.cursor = 'pointer'
div.style.fontSize = '12px'
div.style.padding = '7px 10px'
div.style.boxShadow = '0 2px 6px 0 rgba(27, 142, 236, 0.5)'
div.style.borderRadius = '5px'
div.style.backgroundColor = 'white'
div.style.width = '32px'//设置SVG的容器大小
div.style.height = '32px'//设置SVG的容器大小
const childSVG = _createSvg('svg', {
xmlns: 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
version: '1.1',
width: '16',//设置为100%,可以贴合SVG容器的大小
height: '16',//设置为100%,可以贴合SVG容器的大小
viewBox: '0 0 1024 1024'
})
const path1 = _createSvg('path', {
fill: '#2c2c2c',
d: 'M512 512m-80 0a80 80 0 1 0 160 0 80 80 0 1 0-160 0Z'
})
const path2 = _createSvg('path', {
fill: '#2c2c2c',
d: 'M960 480h-33.632C910.752 276.16 747.84 113.248 544 97.632V64a32 32 0 1 0-64 0v33.632C276.16 113.248 113.248 276.16 97.632 480H64a32 32 0 0 0 0 64h33.632C113.248 747.84 276.16 910.752 480 926.368V960a32 32 0 1 0 64 0v-33.632C747.84 910.752 910.752 747.84 926.368 544H960a32 32 0 1 0 0-64zM544 862.368V800a32 32 0 1 0-64 0v62.368C311.424 847.104 176.896 712.576 161.632 544H224a32 32 0 1 0 0-64H161.632C176.896 311.424 311.424 176.896 480 161.632V224a32 32 0 0 0 64 0V161.632c168.576 15.296 303.104 149.792 318.368 318.368H800a32 32 0 1 0 0 64h62.368c-15.264 168.576-149.792 303.104-318.368 318.368z'
})
childSVG.appendChild(path1)
childSVG.appendChild(path2)
div.appendChild(childSVG)
document.body.appendChild(div)
</script>
</html>
注意点
- SVG元素节点生成要带命名空间
- viewBox要按照下载的SVG文件的viewBox定义,否则展示不出来