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>

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

我在tutorial中找到了这张照片，但只是为了展示一组元素的外观。所以这没有用。

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

使用feColorMatrix和feMorphology的SVG过滤器（参见this post）。但在这种情况下，应用滤镜时元素的颜色会发生变化。
使用<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" />

使用dilate操作来增加图形元素。通过使用源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"/>

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

SVG：元素组的边框轮廓

1 个答案: