SVG：元素组的边框轮廓

Question

我想为由<g>. 举个例子：

<g id="group">
  <circle cx="125" cy="125" r="65" fill="orange" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>

最佳情况下，边框应如下图所示。元素和边框之间的距离不是必需的（但很好）。主要目标应该是围绕组元素的单个边框（笔画）。

我在教程中找到了这张图片，但它只是为了演示一组元素的外观。所以这没有帮助。

我已经尝试过不同的解决方案，但没有一个按预期工作，例如

• 使用 feColorMatrix 和 feMorphology 的 SVG 过滤器（请参阅此帖子）。但在这种情况下，应用过滤器时元素的颜色会发生变化。
• <g>使用stroke和样式stroke-width会在组周围产生一个矩形边框，这也不是我想要的。

任何想法，如何如图所示在组周围设置边框？

Answer 1

很难获得您提供的图像中显示的虚线笔划。但是一个坚实的轮廓应该是可能的。下面是一个例子：

<svg width="250" height="250" viewBox="0 0 250 250">
  <defs>
    <filter id="groupborder" filterUnits="userSpaceOnUse"
            x="0" y="0" width="250" height="250">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="8" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="10" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="1 0 0 0 0
                             0 1 0 0 0
                             0 0 1 0 0
                             0 0 0 .3 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
  <g id="group" filter="url(#groupborder)">
    <circle cx="125" cy="125" r="65" fill="orange" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
  </g>
</svg>

这是它的工作原理：

<feMorphology operator="dilate" in="SourceAlpha" radius="8" result="e1" />

使用扩张操作来增加图形元素。通过使用源 alpha 作为输入图像，这会导致与图像中的图形元素对应的黑色区域和其他地方的白色区域。

<feMorphology operator="dilate" in="SourceAlpha" radius="10" result="e2" />

再次使用相同的过滤器，但膨胀量更大，导致图像略显胖

<feComposite in="e1" in2="e2" operator="xor" result="outline"/>

这些扩大的结果使用 XOR 运算进行组合，留下黑色轮廓。

<feColorMatrix type="matrix" in="outline"
values="1 0 0 0 0
        0 1 0 0 0
        0 0 1 0 0
        0 0 0 .3 0" result="outline2"/>

此过滤器将轮廓的 alpha 分量乘以 0.3，因此它显示为灰色而不是纯黑色。

<feComposite in="outline2" in2="SourceGraphic" operator="over" result="output"/>

最后，将此轮廓添加到原始图像中。