SVG标签是HTML中唯一原生承载矢量绘图指令的容器，它创建可被DOM访问、CSS控制、JS操作的独立坐标系上下文，需显式声明xmlns命名空间和viewBox以确保正确缩放与交互。
svg 标签是 HTML 中唯一能原生承载矢量绘图指令的容器，不是图片占位符，也不是样式钩子——它直接生成一个可被 DOM 访问、CSS 控制、JS 操作的图形上下文。
svg 标签本质是独立坐标系容器
- 它不继承父元素的
font-size或line-height，默认宽高为300px × 150px（和canvas一致），但内部单位无默认物理含义：数值100就是“100 单位”，缩放时按比例映射到像素，所以不失真 - 必须显式声明命名空间：
xmlns="<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>"，否则在 XML 解析环境（如某些服务端渲染或 iframe 加载）中可能失效 -
viewBox是关键：它定义逻辑坐标范围（如"0 0 100 100"），让 SVG 内容适配任意width/height，没有它，width和height只控制容器尺寸，内容可能被裁剪或拉伸
常见错误现象：
- 图形只显示左上角一小块 → 忘写
viewBox或值设错 - 图标在高 DPR 屏幕上发虚 → 用了固定
px值且没配合viewBox做响应式缩放 - 动态修改
circle的cx没反应 → 元素被包裹在<g transform="...">里，坐标系已偏移
直接内嵌 svg 才能触发 DOM 交互能力
- 只有内嵌（非
img、非object）时，内部元素如path、rect、text才是真实 DOM 节点，支持：-
document.querySelector('circle') -
element.addEventListener('click', ...) - CSS 伪类如
circle:hover { fill: red; }
-
-
img引入的 SVG 是封闭资源，浏览器只当图片渲染，无法选中内部元素，也无法用 CSS 修改颜色（除非用filter: brightness()这类全局滤镜） -
object理论上可访问内部 DOM，但需等load事件后通过contentDocument获取，跨域、CSP、加载失败兜底都更复杂，实际项目中极少用
性能提示：
- 内嵌大量
path（比如地图路径）会显著增加 DOM 节点数，影响重排重绘；此时应评估是否改用canvas渲染静态底图 + SVG 叠加可交互图层 -
svg内部不支持will-change，动画频繁时优先用transform+opacity触发 GPU 加速
svg 的坐标系统和 CSS 单位混用要小心
-
svg元素属性（如cx、r、stroke-width）接受纯数字、带单位的值（px、em、%），但行为不同：- 纯数字（如
cx="50"）按viewBox定义的逻辑单位解释 -
px值（如stroke-width="2px"）会被转为与 CSS px 一致的物理像素，脱离viewBox缩放控制，导致在高清屏上变细或模糊
- 纯数字（如
- CSS 控制 SVG 时，
fill、stroke可继承，但stroke-width不继承；想统一描边粗细，建议用 CSS 类 + 自定义属性：.icon { --sw: 2; stroke-width: calc(var(--sw) * 1px); }
容易被忽略的细节：
立即学习“前端免费学习笔记（深入）”；
-
text元素的font-size默认单位是 用户单位（user unit），不是 CSS px；若未设viewBox，font-size="16"就是 16px；但设了viewBox="0 0 100 100"后，font-size="16"实际大小取决于 SVG 容器当前渲染宽度 / 100 × 16 -
clipPath、mask、filter等引用型功能，必须用url(#id)语法，且id必须在同个文档内（跨iframe或img不生效）
svg 标签不是“画布”，而是“绘图上下文声明”。它的复杂性不在语法，而在坐标系、单位、命名空间、DOM 生命周期四者交织——漏掉任意一环，图形就可能消失、错位、不可交互或响应异常。
