是否可以将子元素的高度和宽度扩展到其容器之外？

Question

我有一个由第三方API提供的可缩放的svg。它基本上是一个映射到网格的图形。问题是API没有在提供的svg文件中包含网格，所以我不得不破解它包含一个。基本上，标记是这样的：

<svg>
  <g>
    <line>....
    <rect>....
    etc...
  </g>
</svg>

缩放功能已完成，现在我想添加网格。我想我应该像这样添加它：

<svg>
  <g>
     <rect x="0" y="0" width="100%" height="100%" fill="black" />
     <defs>
         <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
           <path d="M 1 1 L 0 0 0 0" fill="none" stroke="green" stroke-width="1" />
         </pattern>
     </defs>
     <rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
    <line>....
    <rect>....
    etc...
  </g>
</svg>

绘制网格，但它绑定在<g>标记内。是否有可能将网格扩展到它之外但仍然可以缩放？或者还有其他更好的方法来实现这一目标吗？