7

I'd like to add a border to a number of elements which are grouped by <g>. As an example:

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

Best case, the border should look like in the following picture. The distance between the elements and the border is not required (but nice to have). The main goal should be a single border (stroke) around the group elements.

group of elements

I found the picture in a tutorial, but there it was just to demonstrate what a group of elements may look like. So this doesn't help.

I already tried different solutions, but none of them worked as expected, e.g.

  • A SVG filter using feColorMatrix and feMorphology (see this post). But in this case, the color of the elements changes when applying the filter.
  • Styling the <g> with stroke and stroke-width results in a rectangular border around the group, which is also not the thing I want.

Any ideas, how to get a border around the group as shown in the picture?

mixable
  • 1,068
  • 2
  • 12
  • 42
  • That statement can`t be true, but I wish I would be:"Styling the g with a stroke results in a rectangular border around the g". It results in a border about EACH element of the g, not around the g itself! – Pascal Jul 13 '18 at 19:34

1 Answers1

9

It would be difficult to get the dashed stroke shown in the image you provided. But a solid outline should be possible. Here's an example:

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

Here's how it works:

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

Uses a dilate operation to fatten up the graphic elements. By using the source alpha as the input image, this results in black regions corresponding to the graphic elements in the image, and white everywhere else.

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

The same filter again, but with a larger amount of dilation, resulting in a slightly fatter image

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

These dilated results are combined using an XOR operation that leaves behind a black 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"/>

This filter multiplies the alpha component of the outline by 0.3 so it appears grey instead of solid black.

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

Finally, add this outline to the original image.

r3mainer
  • 23,981
  • 3
  • 51
  • 88
  • 1
    Great answer, thank you!! I'm fine with a solid line, so a dashed stroke is not necessary. The result looks as expected. – mixable Apr 06 '18 at 16:12
  • how could you make it so that the resulting outline has arbitrary colors? – 40detectives Jan 05 '21 at 20:21
  • 2
    @40detectives To change the colour of the outline, put your RGB values (from 0 ≤ (r, g, b) ≤ 1) in the last values in the first three rows of the `feColorMatrix` element. For example, `1 0 0` will give you a red outline, and `0 0 1` will give you a blue outline. Change `.3` in the last row to `1` if you don't want the outline to be transparent. – r3mainer Jan 05 '21 at 22:27
  • @r3mainer thank you for this. But is there a way use style attribute to specify color of the outline? – vanowm Dec 30 '22 at 14:30