标签用于svg中图形组合与统一变换，不渲染图形但可打包子元素并共享位置、样式和变换；支持嵌套构建局部坐标系，需注意文字缩放的可读性问题。

在 HTML5 的 SVG 中， 标签是实现图形组合与统一变换最直接、最常用的方式。它本身不渲染任何图形，只起逻辑“打包”作用，但能让多个子元素（如 、、 甚至其他 ）共享位置、样式和变换行为。

用 包裹图形，实现整体位移与定位

把一组相关图形放进 里，再通过 transform="translate(x, y)" 统一移动，比逐个改每个元素的 x/y 更安全、更易维护。

• 外层 的 translate 相当于重设原点：内部所有坐标都相对于这个新起点计算
• 例如画两个并排齿轮，只需封装单个齿轮到 ，再用两个 和 实例化
• 避免手动调整每个 或 ——出错率高，复用性差

统一设置样式，减少重复代码

在 上写 fill、stroke、opacity 等属性，子元素自动继承（除非自己显式覆盖）。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 文字（）会响应 fill，但默认不响应 stroke；如需描边文字，得单独加 stroke 属性
• 推荐用 fill="currentColor"，方便后续用 CSS 控制颜色：外部容器设 color: red，整个组就变红
• 描边粗细（stroke-width）也继承，适合统一控制图标线宽或图表网格线

嵌套 构建多级局部坐标系

变换具有叠加性，外层 rotate + 内层 translate + 再内层 scale，会逐层生效，形成清晰的层级逻辑。

• 仪表盘指针可放在 里，指针本体再用 定位尖端
• 旋转中心点要明确写全，如 rotate(45 100 100) 表示绕 (100,100) 转，不写坐标则默认绕画布左上角
• 调试时可用 JS 调用 getCTM() 查看当前变换矩阵，确认实际坐标偏移

对含文字的组做缩放要特别注意

transform="scale()" 会让文字跟着变小变细，影响可读性。稳妥做法不是硬扛，而是绕开问题。

• 优先用 CSS 控制字体大小：，再配合 的平移/旋转
• 若必须整组缩放，给 单独加反向 transform，比如组 scale(0.75)，文字补 transform="scale(1.33)"
• 更现代方案：用 vector-effect="non-scaling-stroke" 配合固定 font-size，让描边和文字大小“钉死”在视觉尺寸上