是 SVG 分组容器，不渲染图形但支持统一变换；通过 transform 属性可平移、旋转、缩放整组，嵌套 实现多级局部坐标系；需配合 viewBox、CSS 或 vector-effect 避免文字变形；JS 可动态修改 transform 实现交互动画。

标签是 SVG 中最常用的分组容器，它本身不渲染任何图形，但能将多个子元素逻辑上归为一组，从而对整组应用统一的变换（如平移、旋转、缩放、倾斜），极大简化动画和布局控制。

用 transform 属性对整个 组做变换

直接在 元素上设置 transform 属性，其所有子元素（包括嵌套的 ）都会继承该变换效果，且变换以组的坐标原点（默认为画布左上角）为基准：

• 平移示例：... —— 整组向右移 50px、向下移 30px
• 旋转示例：... —— 绕点 (100,100) 顺时针旋转 45 度
• 缩放示例：... —— 横向放大 1.5 倍，纵向压缩至 0.8 倍

嵌套 实现多级变换与局部坐标系隔离

SVG 的变换具有层级叠加性。外层 的变换会作用于内层所有内容，而内层 可定义自己的 transform，形成独立的局部坐标系：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 内层变换基于外层变换后的新坐标系计算，不是绝对画布坐标
• 适合构建可复用组件（如图标、仪表盘指针），让内部元素按自身逻辑定位，不受父级影响
• 例如：一个旋转的齿轮组可包裹在 中；其内部每个齿又用 均匀分布，逻辑清晰且易于维护

配合 viewBox 和 preserveAspectRatio 精确控制缩放行为

当 被整体缩放（尤其是响应式场景）时，若希望文字大小、描边粗细等保持视觉一致，需注意：

• 避免对含 text 元素的 直接使用 scale()，否则文字也会缩放变形；推荐用 CSS font-size 或 vector-effect="non-scaling-stroke" 控制
• 在根 上设置 viewBox 并搭配 preserveAspectRatio，可让整个 内容随容器等比缩放，同时保持比例和可读性
• 若需部分元素“抗缩放”，可用 transform="scale(x,y)" 配合反向缩放（如 scale(1/x, 1/y)）抵消，但更推荐用 CSS 或单独定位

动态操作 的变换（JS 场景）

通过 JavaScript 修改 的 transform 属性，可实现交互式动画或实时控制：

• 获取元素：const group = document.querySelector('#myGroup');
• 更新变换：group.setAttribute('transform', 'translate(200, 150) rotate(15)');
• 组合多个变换时，顺序很重要：先写的先执行（如 translate 在前，则旋转围绕新位置中心）
• 如需高性能动画，建议用 requestAnimationFrame 或 CSS transform（配合 style.transform），但注意 SVG 元素的 style.transform 在部分旧浏览器中支持有限，setAttribute 更兼容

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！