04《跟月影学可视化》学习笔记@初看SVGSVG（Scalable Vector Graphics）可缩放矢量图，是浏览

一、SVG简介

SVG（Scalable Vector Graphics）可缩放矢量图，是浏览器支持的一种基于 XML 语法的图像格式。
SVG 是 HTML 的增强版。
- 都是由标签+属性构成。可以作为浏览器支持的一种图片格式独立使用 img 标签加载或通过 Canvas 绘制。
- 浏览器的 CSS, JavaScript 都能够正常作用于 SVG。
- 一个图形对应一个 SVG 元素，可以让图形的用户交互非常简单。
SVG 属于声明式绘图系统。
SVG 的 g 元素表示一个分组，可以用它来对 SVG 元素建立起层级结构。给 g 元素设置属性，它的子元素会继承。

二、SVG绘制几何图形

<!-- 
  svg: SVG根元素,
  xmlns: xml的名字空间,
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- 
    circle: 圆形,
    cx, cy: 坐标(px),
    r: 半径(px),
    viewBox: 改变SVG的坐标,
  -->
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="orange" />
</svg>

document.createElementNS() 创建 SVG 元素

// document.createElementNS(namespaceURI, qualifiedName[, options])
cosnt circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

// document.createElement()创建普通的HTML元素
const div = document.createElement('div');

三、SVG的优点和局限性

SVG 通过创建标签来表示图形元素，然后将图形元素添加到 DOM 树中，交给 DOM 完成渲染。这种方式可以让图形元素的用户交互实现起来非常方便，但如果图形复杂，SVG 的图形元素会非常多，会导致 DOM 树渲染成为性能瓶颈。