如何在不修改width、height、viewBox的情况下显示SVG viewBox外的路径？

要在不修改width、height、viewBox参数的前提下显示viewBox外的两个圆形路径，有两种可行方案：

方案1：取消SVG视口裁剪 #

默认部分场景下SVG会自动裁剪viewBox边界外的内容，只需给SVG元素添加overflow: visible样式即可解除裁剪，完整代码如下：

<svg width="80" height="80" viewBox="0 0 80 80" class="absolute cursor-grab" style="transform:translate(50px, 50px) rotate(0deg); overflow: visible;">
  <defs>
    <path id="mainPath4AS9WoYBM3K2vGQ2" d="M0 0h80v80H0Z"></path>
    <clipPath id="clip4AS9WoYBM3K2vGQ2"><use xlink:href="#mainPath4AS9WoYBM3K2vGQ2"></use></clipPath>
  </defs>
  <g><use xlink:href="#mainPath4AS9WoYBM3K2vGQ2" fill="#f4f1e9" stroke="#cbbda0" stroke-width="4" clip-path="url(#clip4AS9WoYBM3K2vGQ2)"></use></g>

  <path class="absolute" id="subPath4AS9WoYBM3K2vGQ2" fill="#999" d="M72 20a8 8 0 1 0 16 0a8 8 0 1 0 -16 0 M72 60a8 8 0 1 0 16 0a8 8 0 1 0 -16 0"></path>
</svg>

注：现有代码中的clipPath仅作用于背景矩形，不会影响子路径的显示。

方案2：调整路径位置适配视口 #

如果不想修改SVG的溢出属性，可以将两个圆形路径整体左移8px（刚好让完整圆形落入viewBox范围内），只需修改子路径的d属性：

<path class="absolute" id="subPath4AS9WoYBM3K2vGQ2" fill="#999" d="M64 20a8 8 0 1 0 16 0a8 8 0 1 0 -16 0 M64 60a8 8 0 1 0 16 0a8 8 0 1 0 -16 0"></path>

这种方式无需改动SVG的视口参数，也能完整显示圆形。

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