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

Question

对于我想要的某种风格，我想在 SVG 中勾勒出一组形状。应用于组时，lines 属性似乎单独勾画出每个形状的轮廓，有效地位于附近其他形状的顶部。为了更清楚地解释我的情况：我有一组触摸矩形，每个矩形都是 8x8 像素。然而，它们并没有形成更大的矩形。

为了简单起见，我们假设它们形成一个十字。所以我有 5 个矩形——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>

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 扩展过滤器以将原始形状放在顶部

Answer 3

这是没有 SVG 过滤器的答案：

svg { fill: pink; }
rect { fill: lightblue; }
#outline-me {
    filter: 
      drop-shadow( 2px  2px 0px black) 
      drop-shadow(-2px  2px 0px black) 
      drop-shadow(-2px -2px 0px black)
      drop-shadow( 2px -2px 0px black);
}

<svg xmlns="http://www.w3.org/2000/svg" height="344" width="440">    
 <g id="outline-me">
  <rect x="130" y="10" width="20" height="20" />
  <rect x="130" y="30" width="20" height="20" />
  <rect x="110" y="30" width="20" height="20" />
  <rect x="150" y="30" width="20" height="20" />
  <rect x="130" y="50" width="20" height="20" />
 </g>
</svg>

这样做的好处是，在 HTML 中，您可以使矩形透明，并仅使用以下方式显示轮廓：（

rect { fill: white; /* background: white */ }
#outline-me { mix-blend-mode: darken; }

不幸的是，对于 SVG 情况，这对我不起作用）

http://jsfiddle.net/EoghanM/9ua5fyjx