用SVG概述一组感人的形状

Question

对于我想要的某种风格,我想在SVG中勾勒出一组形状.应用于一组,该stroke属性似乎单独勾勒出每个形状 - 有效地在附近的其他形状之上.为了更清楚地解释我的情况:我有一组每个8x8像素的触摸矩形.但是,它们不会形成更大的矩形.

为简单起见,让我们说它们形成了一个十字架.所以我有5个矩形 - 中间有1个,另一个有一个.我想把它们全部勾勒出来,好像它们是1个形状.鉴于这种"交叉"形状发生了变化,我宁愿不使用路径,因为这需要更多的编码.有没有什么方法可以让效果过滤器将这个组识别为单个形状？

如果没有,是否至少可以制作这个组的黑色副本,其宽度和高度正好大2倍,我可以在组后面创建一个纯黑色轮廓？如果是这样,是否可以不重复该组？

感谢您的任何帮助.

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>