用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>

Answer 2

像这样：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="biggerbwcopy">
          <feColorMatrix values="0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 1 0"/>
          <feMorphology operator="dilate" radius="2"/>
        </filter>
    </defs>
    <rect id="r" x="10" y="10" width="20" height="20" fill="blue" onclick="biggerbw()"/>
    <script>

      function biggerbw() {
        document.getElementById("r").style.filter="url(#biggerbwcopy)";
      }
    </script>
</svg>

http://jsfiddle.net/longsonr/LrDHT/1/点击矩形，它变得黑而大。

您可以使用feMerge扩展过滤器以将原始形状放在顶部