svg - 用 SVG 勾勒出一组感人的形状

Question

对于我想要的某种样式，我想在 SVG 中勾勒出一组形状。应用于一组时，stroke 属性似乎单独勾勒出每个形状——有效地位于附近其他形状的顶部。为了更清楚地解释我的情况:我有一组触摸矩形，每个矩形为 8x8 像素。但是，它们不会形成更大的矩形。

为简单起见，假设它们形成一个十字。所以我有 5 个矩形--1 个在中间，另一个在那个边的每一侧。我想勾勒出它们的轮廓，就好像它们是 1 个形状一样。鉴于这种“十字”形状发生变化，我宁愿不使用路径，因为这需要更多的编码。有什么方法可以让效果过滤器将这个组识别为单个形状吗？

如果不是，是否至少可以制作该组的黑色副本，使其在宽度和高度上恰好大 2px，我可以将其放置在组后面以创建纯黑色轮廓？如果是这样，是否可以不复制组？

感谢您的帮助。

Answer 1

例如，您可以使用像这样的 svg 过滤器:

<filter id="outline">
  <feMorphology operator="dilate" in="SourceAlpha" radius="1"/>
  <feComposite in="SourceGraphic"/>
</filter>

像这样使用过滤器:

<g filter="url(#outline)">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <line x1="20" y1="10" x2="80" y2="15" stroke="lime"/>
</g>

另一种可能可行的替代方法是这样的，具体取决于您的内容的外观:

<use xlink:href="#g" stroke-width="10" stroke="black"/>
<g id="g">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <circle fill="lime" cx="140" cy="10" r="5"/>
  <circle fill="lime" cx="120" cy="10" r="5"/>
</g>