如何将svg defs与标签分开？

Question

在我的codepen示例中，我有两个svgs。

我想将所有 defs 移动到一个svg标记中，如下所示：

<svg>
 <defs>
  <pattern id="a" ......... />
  <pattern id="b" ......... />
 </defs>
</svg>

和我所有的路径分别进入单独的svg标签：

<svg>
 <path fill="url(#a)" d="M................................. />
</svg>
<br>
<svg>
 <path fill="url(#b)" d="M................................. />
</svg>

问题是我什么时候图像没有填满所有路径..

那么我在这里失踪了什么？

my codepen example