纯JavaScript在HTML页面写入SVG

fredricen

已于 2022-06-16 12:26:32 修改

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html 前端

于 2022-06-14 16:03:55 首次发布

本文链接：https://blog.csdn.net/fredricen/article/details/125278237

版权

JavaScript 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

什么是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元素。

实现写入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>