数据可视化-SVG

// SVG 简介
1. SVG 是 Scalable Vector Graphics 的缩写，即可伸缩矢量图形
2. 使用 XML 描述的矢量文件
    1. 什么是矢量文件？
        1. 矢量文件（Vector File）是一种基于数学公式（点、线、曲线和多边形）来描述图像的计算机图形文件格式。
        2. 核心特点
            1. 无限缩放
                1. 矢量图形通过数学公式渲染，无论放大多少倍都不会出现锯齿或失真，保持边缘清晰。
                2. 对比：位图放大后会模糊（例如照片放大后出现马赛克）。
            2. 由路径和锚点构成
                1. 图形由路径（线条、曲线）和锚点（控制路径的点）组成，可自由编辑形状、颜色和描边。
            3. 文件体积较小
                1. 存储的是数学数据而非像素，因此文件通常比同尺寸的位图更小（但复杂图形可能例外）。
            4. 易于编辑
                1. 可单独修改图形的每个部分（如改变颜色、调整形状），适合设计、Logo、图标等需要反复修改的场景。
3. 使用方式
    1. 浏览器直接打开
    2. 在 HTML 中使用 img 标签引用
    3. 直接在 HTML 中使用 SVG 标签
    4. 作为 CSS 背景
----------------------------------------------------------------------------------------------
// 单位
在 SVG 中，默认单位是「像素（px）」，但 SVG 的单位系统比普通 CSS 更灵活。以下是详细解释：
1. 默认单位（无单位时）
    当只写 width="100" 时：
    默认单位是 px（等同于 width="100px"）。
2. SVG 支持的所有单位
    你可以显式指定单位，支持以下类型：
    单位	示例	说明
    px	width="100px"	像素（默认单位）
    em	width="10em"	相对于当前字体大小
    ex	width="5ex"	相对于字母 "x" 的高度
    %	width="50%"	相对于父容器的宽度/高度
    cm	width="5cm"	厘米（基于 DPI 转换）
    mm	width="50mm"	毫米
    in	width="2in"	英寸（1in = 96px）
    pt	width="72pt"	点（1pt = 1/72 inch）
    pc	width="6pc"	派卡（1pc = 12pt）
3. 关键注意事项
    1. 百分比单位（%）：
    百分比的值是相对于父容器的尺寸。
    如果父容器未明确尺寸，百分比可能失效。
    2. 物理单位（cm/mm/in）：
    实际显示大小取决于设备的 DPI（每英寸像素数）。
    通常 1in = 96px（标准屏幕 DPI）。
4. 单位换算表
单位	换算为像素（px）
1in	96px
1cm	37.8px (≈96/2.54)
1mm	3.78px
1pt	1.33px (≈96/72)
1pc	16px (12pt = 16px)
----------------------------------------------------------------------------------------------
// 基本图形和属性
1. 基本图形
    1. rect 矩形
    2. circle 圆形
    3. ellipse 椭圆
    4. line 线
    5. polyline 折线
    6. polygon 多边形
2. 基本属性
    1. fill 填充颜色
    2. stroke 描边颜色
    3. stroke-width 描边宽度
    4. transform 变换
----------------------------------------------------------------------------------------------
// rect 矩形，有六个基本属性控制矩形在屏幕上的位置和形状
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
1. x 表示矩形左上角的 x 位置
2. y 表示矩形左上角的 y 位置
3. rx 表示矩形角的 x 半径 // Radius X（X 轴半径）
4. ry 表示矩形角的 y 半径 // Radius Y（Y 轴半径）
5. rx 属性的实际效果取决于矩形的 ry 属性和宽度：
    1. 如果你为 rx 属性指定了正确的值，但是没有定义 ry 属性的值，那么浏览器会让 ry 取 rx 属性被指定的相等的值。（反之亦然）
    2. 如果 rx 和 ry 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。
    3. rx 属性的有效值为矩形宽度的一半（即，如果为 rx 指定的值大于矩形宽度的一半，那么浏览器会视为 rx 的值为矩形宽度的一半）。
    4. 四个角同时生效
    5. 圆心位置是根据 rx + ry 动态计算出来的
----------------------------------------------------------------------------------------------
// circle 圆形，它采用三个基本参数来确定元素的形状和大小
<circle cx="25" cy="75" r="20"/>
1. r 表示圆形的半径
2. cx 表示圆形中心的 x 位置 // Center X（圆心的 X 坐标）
3. cy 表示圆形中心的 y 位置 // Center Y（圆心的 Y 坐标）
----------------------------------------------------------------------------------------------
// ellipse 椭圆形，是圆形的扩展，可以分别缩放圆形的 x 和 y 半径
<ellipse cx="75" cy="75" rx="20" ry="5"/>
1. rx 表示椭圆的 x 半径
2. ry 表示椭圆的 y 半径
3. cx 表示椭圆中心的 x 位置
4. cy 表示椭圆中心的 y 位置
----------------------------------------------------------------------------------------------
// line 线条，将两个点的坐标作为参数，并在它们之间绘制一条直线
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
1. x1 表示点 1 的 x 位置
2. y1 表示点 1 的 y 位置
3. x2 表示点 2 的 x 位置
4. y2 表示点 2 的 y 位置
----------------------------------------------------------------------------------------------
// polyline 折线，是一个连接的直线组。由于点的列表可能很长，因此所有点都包含在一个属性中
<polyline points="0 60, 0 0, 120 70"/>
1. points 表示点的列表。每个数字必须用空格、逗号、EOL 或带额外空格的行尾符分隔。
    每个点必须包含两个数字：x 坐标和 y 坐标。因此，列表 (0,0)、(1,1) 和 (2,2) 可以写成 0, 0 1, 1 2, 2。
----------------------------------------------------------------------------------------------
// polygon 类似于 polyline，因为它由连接一系列点的直线段组成。但对于多边形，路径会自动连接最后一个点与第一个点，形成一个封闭的形状。
// 矩形是一种多边形，因此可以使用多边形创建没有圆角的 <rect/> 元素
<polygon points="0 60, 0 0, 120 70"/>
1. points 表示点的列表，每个数字用空格、逗号、EOL 或带额外空格的行尾符分隔。每个点必须包含两个数字：x 坐标和 y 坐标。
    因此，列表 (0,0)、(1,1) 和 (2,2) 可以写成 0, 0 1, 1 2, 2。然后绘制会关闭路径，因此会从 (2,2) 到 (0,0) 绘制最后一条直线。
----------------------------------------------------------------------------------------------
// path 是 SVG 中最通用的形状。使用 path 元素，您可以绘制矩形（带或不带圆角）、圆形、椭圆、折线和多边形。基本上任何其他类型的形状、贝塞尔曲线、二次曲线等等。
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
1. d 表示点的列表以及有关如何绘制路径的其他信息，大写是绝对坐标，小写是相对坐标
    - M（移动到）：指定一个新位置，但不绘制线条。 // Move To
    - L（直线到）：绘制一条直线到指定位置。 // Line To
    - H（水平线到）：绘制一条水平线到指定位置。// Horizontal Line To
    - V（垂直线到）：绘制一条垂直线到指定位置。 // Vertical Line To
    - Q（贝塞尔曲线）：二次贝塞尔曲线(一个控制点) // Quadratic Bézier
    - T（贝塞尔曲线）：简化的二次贝塞尔曲线(自动对称控制点) // Smooth Quadratic Bézier Curve
    - C（贝塞尔曲线）：三次贝塞尔曲线(两个控制点) // Cubic Bézier
    - S（贝塞尔曲线）：简化的三次贝塞尔曲线(自动对称第二个控制点) // Smooth Cubic Bézier Curve
    - A（椭圆弧）：绘制一条弧线到指定位置。 // Elliptical Arc
    - Z（闭合）：用于将当前路径的终点与起点用直线连接，形成一个封闭图形。它不区分大小写（Z 和 z 效果相同）。
2. M 移动命令
    语法：M x,y
    将画笔移动到指定坐标，不绘制线条
    示例：M50,50 将起点设置在 (50,50)
<path d="M50,50 L100,50" stroke="red" stroke-width="2" fill="none"/>
<text x="50" y="40" font-size="12">1. M: Move To (起点)</text>


3. L 直线命令
    语法：L x,y
    从当前位置画直线到指定坐标
    示例：L100,50 从当前位置画到 (100,50)
<path d="M150,50 L200,100" stroke="green" stroke-width="2" fill="none"/>
<text x="150" y="40" font-size="12">2. L: Line To</text>

4. H 水平线命令
    语法：H x
    水平直线，只指定X坐标
    示例：H300 水平画到X=300的位置
<path d="M250,50 H300" stroke="blue" stroke-width="2" fill="none"/>
<text x="250" y="40" font-size="12">3. H: Horizontal Line</text>

5. V 垂直线命令
    语法：V y
    垂直直线，只指定Y坐标
    示例：V100 垂直画到Y=100的位置
<path d="M350,50 V100" stroke="purple" stroke-width="2" fill="none"/>
<text x="350" y="40" font-size="12">4. V: Vertical Line</text>

6. Q 二次贝塞尔曲线(一个控制点)
    语法：Q cx,cy x,y
    二次贝塞尔曲线，需要一个控制点
    示例：Q100,100 150,150
    (100,100)是控制点
    (150,150)是终点
<path d="M50,150 Q100,100 150,150" stroke="orange" stroke-width="2" fill="none"/>
<circle cx="100" cy="100" r="3" fill="red"/>
<text x="50" y="140" font-size="12">5. Q: Quadratic Bézier</text>
<text x="90" y="90" font-size="10">(控制点)</text>


7. T 简化的二次贝塞尔曲线(自动对称控制点)
    语法：T x,y
    自动对称的二次贝塞尔曲线
    示例：Q250,100 300,150 T400,150
    第二个曲线的控制点会自动与第一个对称，注意是反方向的对称
    (400,150)是终点
<path d="M200,150 Q250,100 300,150 T400,150" stroke="brown" stroke-width="2" fill="none"/>
<circle cx="250" cy="100" r="3" fill="red"/>
<circle cx="350" cy="100" r="3" fill="red" opacity="0.5"/>
<text x="200" y="140" font-size="12">6. T: Smooth Q-Bézier</text>
<text x="240" y="90" font-size="10">(控制点)</text>
<text x="340" y="90" font-size="10">(自动对称)</text>


8. C 三次贝塞尔曲线(两个控制点)
    语法：C cx1,cy1 cx2,cy2 x,y
    三次贝塞尔曲线，需要两个控制点
    示例：C100,200 150,300 200,250
    (100,200)和(150,300)是控制点
    (200,250)是终点
<path d="M50,250 C100,200 150,300 200,250" stroke="pink" stroke-width="2" fill="none"/>
<circle cx="100" cy="200" r="3" fill="red"/>
<circle cx="150" cy="300" r="3" fill="red"/>
<text x="50" y="240" font-size="12">7. C: Cubic Bézier</text>
<text x="90" y="190" font-size="10">(控制点1)</text>
<text x="140" y="310" font-size="10">(控制点2)</text>

9. S 简化的三次贝塞尔曲线(自动对称第二个控制点)
    语法：S cx2,cy2 x,y
    自动对称的三次贝塞尔曲线
    示例：C300,200 350,300 400,250 S500,200 550,250
    第二个曲线的第一个控制点会自动对称，注意是反方向的对称
    (500,200)是控制点
    (550,250)是终点
<path d="M250,250 C300,200 350,300 400,250 S500,200 550,250" stroke="teal" stroke-width="2" fill="none"/>
<circle cx="300" cy="200" r="3" fill="red"/>
<circle cx="350" cy="300" r="3" fill="red"/>
<circle cx="450" cy="300" r="3" fill="red" opacity="0.5"/>
<circle cx="500" cy="200" r="3" fill="red"/>
<text x="250" y="240" font-size="12">8. S: Smooth C-Bézier</text>
<text x="290" y="190" font-size="10">(控制点1)</text>
<text x="340" y="310" font-size="10">(控制点2)</text>
<text x="440" y="310" font-size="10">(自动对称)</text>

10. A 椭圆弧
    语法：A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
    绘制椭圆弧
    示例：A50,30 90 1 1 200,400
    rx=50, ry=30 (椭圆半径)
    x-axis-rotation=90(旋转角度)
    large-arc-flag=1 (弧度) // 0-小弧度(<180°) 1-大弧度(>=180°)
    sweep-flag=1 (绘制方向) // 0-逆时针 1-顺时针
    x,y=200,400(终点)
<path d="M100,400 A50,30 90 1 1 200,400" stroke="black" stroke-width="2" fill="none"/>
<text x="100" y="390" font-size="12">9. A: Elliptical Arc</text>
<text x="150" y="370" font-size="10">(rx=50,ry=30)</text>

11. Z 闭合命令
    命令格式：Z 或 z（无参数）。
    作用：从当前点画一条直线到路径的 初始点（即第一个 M/m 命令定义的起点）。
    执行后：
        当前坐标重置为初始点（等同于回到路径起点）。
        如果路径未定义初始点（如未使用 M/m），Z 不生效。
<path d="M100,100 L200,100 L150,200 Z" />

12. 重要说明
    1. 多个相同命令可以省略命令字母：
        L 10,10 20,20 30,30 等同于 L 10,10 L 20,20 L 30,30
    2. 坐标可以用空格或逗号分隔：
        M10,10 和 M 10 10 等效
    3. 路径命令是顺序敏感的，必须按正确顺序书写
    4. 每次命令结束后，当前坐标一定是该命令的终点，可通过 Z 命令闭合路径，回到初始点