Svg 为相邻形状创建轮廓

给定一些有边框的SVG形状，有没有办法将它们的样式设置为仅在其外部边缘上有边框

给出这样一个SVG：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="50" height="50" stroke="black" fill="#cccc99"/>
  <rect x="60" y="10" width="50" height="50" stroke="black" fill="#cccc99"/>
  <rect x="10" y="60" width="50" height="50" stroke="black" fill="#cccc99"/>
</svg>

---

我希望在三个相邻矩形的外缘周围有一个边框。这是否可以仅使用样式？我使用的形状相对简单（没有孔或奇怪的几何图形），边界形状将共享完全相同的边界。

当我设置一个JSFIDLE来创建问题的图片时，我还提出了一个可能的解决方案。它确实需要对SVG进行一些编辑（复制形状），对于更复杂的形状，它不是很宽容，但对我来说已经足够好了，而且我不必合并形状

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="dilate">
      <feMorphology operator="dilate" in="SourceGraphic" radius="2" />
    </filter>
    </defs>
  <rect x="10" y="10" width="50" height="50" fill="none" stroke-width="5" stroke="black"/>
  <rect x="10" y="60" width="50" height="50" fill="none" stroke-width="5" stroke="black"/>
  <rect x="60" y="10" width="50" height="50" fill="none" stroke-width="5" stroke="black"/>
  <rect x="10" y="10" width="50" height="50" fill="#cccc99" filter="url(#dilate)"/>
  <rect x="60" y="10" width="50" height="50" fill="#cccc99" filter="url(#dilate)"/>
  <rect x="10" y="60" width="50" height="50" fill="#cccc99" filter="url(#dilate)"/>
 </svg>

小提琴：

---

在这里，所有形状都是复制的，最底层提供笔划，最顶层提供填充。然后，我使用a来让填充覆盖相对侧的笔划。只要冲程的厚度是稀释度的两倍以上，就只能看到外部冲程。摆弄稀释半径和笔划宽度，直到达到想要的效果。

您可能需要使用路径。()