如何使SVG viewBox适配宽高设为百分比的元素？

嘿，我来帮你搞清楚这个问题的根源，以及怎么解决它～

问题原因 #

你遇到的核心问题是SVG中百分比尺寸和坐标的参考系和你想象的不一样：

当你给<svg>设置viewBox时，它定义了两个关键内容：

1. 哪些用户坐标系区域会被映射到SVG的显示视口（也就是width和height设置的区域）
2. 直接放在<svg>下的元素，它们的百分比尺寸、坐标是基于viewBox的width和height来计算的，而不是视口的尺寸，也不是可见区域的位置。

拿你的第二个例子来说：

<svg width="200" height="100" viewBox="100,0,100,50" ...>
  <rect width="100%" height="100%" fill="teal"></rect>
</svg>

这里viewBox="100,0,100,50"的意思是：

• 我们要把用户坐标系中**从(100,0)到(200,50)**的区域，缩放填满200x100的视口
• 同时，元素的百分比参考系是viewBox的宽高：100（宽）和50（高）

所以你的<rect>默认x=0、y=0，加上width="100%"（100用户单位）、height="100%"（50用户单位），它的实际范围是用户坐标系的**(0,0)到(100,50)**——这个区域完全在viewBox定义的可见区域（100-200, 0-50）的左边，自然就看不到了。

解决方案 #

根据你的需求，有两种常用的解决方式：

方案1：调整元素的坐标，让它对齐viewBox的可见区域 #

如果你希望<rect>刚好填满viewBox定义的可见区域，可以给它设置对应的百分比坐标：

<svg width="200" height="100" viewBox="100,0,100,50" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- x设为100%，刚好对齐viewBox的min-x；宽高100%填满viewBox区域 -->
  <rect x="100%" y="0%" width="100%" height="100%" fill="teal"></rect>
  <circle r="50" cx="100" cy="50" fill="red"></circle>
</svg>

这里x="100%"对应的是100用户单位（刚好是viewBox的min-x值），所以<rect>的范围变成了(100,0)到(200,50)，正好落在viewBox的可见区域里。

方案2：用裁剪路径（clipPath）替代viewBox偏移 #

如果你想保留原始的用户坐标系，只是想裁剪显示右上部分，可以用<clipPath>来实现，这样<rect>的百分比尺寸依然能正常覆盖整个画布：

<svg width="200" height="100" viewBox="0,0,200,100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- 定义要裁剪的区域：右上100x50 -->
    <clipPath id="clipArea">
      <rect x="100" y="0" width="100" height="50" />
    </clipPath>
  </defs>
  <!-- 给要裁剪的元素组应用裁剪路径 -->
  <g clip-path="url(#clipArea)">
    <rect width="100%" height="100%" fill="teal"></rect>
    <circle r="50" cx="100" cy="50" fill="red"></circle>
  </g>
</svg>

这种方式下，<rect>还是完整覆盖整个SVG画布，但只有右上部分会被显示出来，同时<circle>也会被裁剪成对应的部分。

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