CSS媒体查询无法修改SVG<path>的d属性，真正可行的是用多套预设路径配合display切换或<use>引用，结合viewBox与百分比坐标实现响应式。
SVG <path> 在媒体查询中无法直接重绘？
不能。CSS 媒体查询无法修改 <path> 的 d 属性值，哪怕用 attr(d) 或 CSS 自定义属性也无法触发路径重绘。你看到的“响应式流程图”本质是切换不同预设的 SVG 结构，或靠 JS 动态生成路径，不是纯 CSS 驱动。
常见错误现象：@media (max-width: 768px) { .arrow-path { d: path('M0,0 L100,0'); } } —— 这段代码完全无效，d 不是可继承/可动画的 CSS 属性，浏览器直接忽略。
- 真正可行的做法：用多个
<path>元素，配合display: none/block切换 - 或使用
<use>引用不同<defs>中的<path>，再用媒体查询控制可见性 - 若流程图节点位置也需响应式调整，必须用
viewBox+ 百分比坐标，而非固定像素
用 viewBox 和百分比坐标让 SVG 自适应容器
这是纯 CSS 响应式流程图最可靠的基础。固定宽高的 width/height + 绝对像素坐标会导致缩放失真、连线错位；而 viewBox 把整个 SVG 映射到容器尺寸，再用 0–100 的相对坐标画节点和路径，才能随容器等比缩放。
使用场景：流程图嵌入响应式卡片、仪表盘侧边栏、移动端折叠面板
立即学习“前端免费学习笔记（深入）”；
-
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">是起点，所有坐标按百分比理解 - 节点
<circle cx="20" cy="30" r="5">表示左起 20%、上起 30% - 连线
<path d="M20,30 L40,30">横向连接两个节点，缩放后仍对齐 - 避免写
width="600px"，改用width="100%"或 CSS 控制容器宽高
媒体查询只控制显隐和文字，别碰路径几何
想在小屏隐藏分支、合并步骤、精简标签？可以。但想用 CSS 改变箭头弯曲度、转向角度、连接点坐标？不行。这些必须提前准备多套 <path>，靠 CSS 显隐切换。
性能影响：每多一套路径结构，DOM 节点就多一倍。复杂流程图建议用 JS 按需渲染，而非全量塞进 HTML。
- 给主路径加
class="path-desktop"，备用路径加class="path-mobile" - 在 CSS 中写：
@media (max-width: 480px) { .path-desktop { display: none; } .path-mobile { display: block; } } - 文字标签同样处理：
<text class="label-full">审批通过</text>和<text class="label-short">通过</text> - 注意：IE 不支持
display切换<path>，可用opacity: 0; pointer-events: none;兜底
为什么不用 transform: scale() 模拟响应式？
因为会模糊文字、错位点击热区、放大 stroke 宽度。尤其当流程图含交互（如 hover 高亮、点击跳转），scale() 会让 getBoundingClientRect() 返回的坐标与视觉位置不一致，后续 JS 逻辑极易出错。
兼容性影响：Firefox 对 transform 下的 <path> 渲染有细微偏移，Safari 对 stroke-width 缩放行为不一致。
- 绝对不要对整个
<svg>套transform: scale(0.8) - 如果必须缩放，用
viewBox改变映射比例，例如从"0 0 100 100"改为"0 0 125 125"实现等效缩小 - 文字大小统一用
em或rem，并确保父容器 font-size 可被媒体查询调整
最易被忽略的一点：SVG 内部没有“流式布局”概念，所有位置都是手动计算的。所谓响应式，其实是用 CSS 控制多套手工校准过的视图，而不是让浏览器自动排版。
