为何内层viewBox会改变SVG缩放？实例疑问解析

核心原因 #

SVG规范明确：viewBox是仅<svg>元素才支持的属性，<g>元素没有viewBox属性——你给第三个示例里的<g>添加的viewBox="0 0 100 100"完全无效，这是十字变小的根本原因。

逐个示例拆解 #

1. 基准示例（无viewBox，百分比坐标）

子SVG视口为父SVG的25%宽（128px）、100%高（128px），无viewBox时所有百分比都相对这个子视口：

• 十字线位置是子视口中心，线长占满整个子视口
• stroke-width="5%"对应子视口尺寸的5%，即128px × 5% = 6.4px

2. 带viewBox的子SVG

子SVG设置viewBox="0 0 100 100"，将128px×128px的子视口映射为100×100的坐标空间：

• 内部x1="50"对应viewBox的50单位，换算为像素是50 × (128/100) = 64px，和基准的50%一致
• stroke-width="5"对应viewBox的5单位，换算为5 × 1.28 = 6.4px，和基准的5%一致，因此大小匹配预期

3. 给<g>加viewBox的错误示例

子SVG未设置viewBox，<g>的viewBox无效，内部坐标直接使用子视口的用户单位（1单位=1px）：

• x1="50"就是50px，线长仅100px（远小于子视口的128px）
• stroke-width="5"就是5px，比基准的6.4px更细
• 线短+线细双重因素，导致十字看起来更小

4. 嵌套viewBox的恢复示例

子SVG本身设置了viewBox="0 0 100 100"，子视口的坐标空间已被映射为100×100，<g>的无效viewBox不影响渲染：

• 内部x1="50"仍对应viewBox的50单位，换算为64px，线长占满子视口
• stroke-width="5"换算为6.4px，因此大小和基准一致

实际场景解决方案 #

创建瓦片集时，要给**<svg>元素**而非<g>或<defs>内元素添加viewBox：

• 若要让<defs>内元素独立于视口，可将其放在带viewBox的内部<svg>中，示例如下：

<svg width="512" height="128" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 用内部svg定义带viewBox的可复用瓦片 -->
    <svg id="tile" viewBox="0 0 100 100">
      <line x1="50" y1="0" x2="50" y2="100" stroke="black" stroke-width="5"/>
      <line x1="0" y1="50" x2="100" y2="50" stroke="black" stroke-width="5"/>
    </svg>
  </defs>
  <!-- 复用瓦片时自动适配视口 -->
  <use href="#tile" x="0%" width="25%" height="100%"/>
  <use href="#tile" x="25%" width="25%" height="100%"/>
</svg>

内容的提问来源于stack exchange，提问作者gturri