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

【问题标题】：Outline a group of touching shapes with SVG用 SVG 勾勒出一组感人的形状
【发布时间】：2012-03-12 14:42:07
【问题描述】：

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

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

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

感谢您的帮助。

【问题讨论】：

标签： svg outline stroke

【解决方案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>

【讨论】：

感谢您的回答；不得不把它给第一个虽然:)虽然也很有用^^ +1

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

【讨论】：

feMorphology 正是我所需要的！谢谢