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

我有一个可缩放的svg，它是由第三方API提供的。它基本上是一个映射到网格的图形。问题是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>

---

网格已绘制，但已绑定在标记内。是否可以将栅格延伸到它之外，但仍然可以缩放？还是有其他更好的方法来实现这一点

你能解释一下你所说的标签内的绑定是什么意思吗？一个演示，比如一个JSFIDLE，或者至少一个屏幕截图，会很有用。顺便说一句，决定网格大小的不是group元素，而是rect。