为相邻形状创建轮廓

Question

鉴于某些边界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>

我想在三个相邻矩形的外边缘周围有一个边框。这可能只使用样式吗？我使用的形状相对简单（没有孔或奇怪的几何形状），并且边界形状将共享完全相同的边界。

Answer 1

当我设置一个JSFiddle为问题创建图片时，我也提出了一个可能的解决方案。它确实需要对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>

小提琴：https://jsfiddle.net/rye2vfpz/

这里所有形状都是重复的，最底层提供笔划，最顶层提供填充。然后，我使用dilate filter让填充物覆盖对侧的笔画。只要笔划的厚度是稀释度的两倍以上，就只能看到外部笔划。使用稀释半径和笔划宽度，直到获得所需效果。