How to style SVG g element

Question

I have some SVG elements grouped together in a  lt g gt  element  I just want to style that  lt g gt  element to show grouping of elements  Like I want to give some background-color and a border to it  How it would be achieved   I tried fill and stroke attribute to  lt g gt  element  but it doesn t work  How it would be possible  Thanks in advance   Sample Here   lt svg width  640  height  480  xmlns  http   www w3 org 2000 svg  gt       lt g fill  blue  stroke  2  gt               lt rect id  svg 6  height  112  width  84  y  105  x  136  stroke-linecap  null  stroke-linejoin  null  stroke-dasharray  null  stroke-width  5  stroke   000000  fill   00ff00   gt           lt ellipse fill   FF0000  stroke   000000  stroke-width  5  stroke-dasharray  null  stroke-linejoin  null  stroke-linecap  null  cx  271  cy  156  id  svg 7  rx  64  ry  56   gt       lt  g gt   lt  svg gt

User · Answer

You cannot add style to an SVG  lt g gt  element  Its only purpose is to group children  That means  too  that style attributes you give to it are given down to its children  so a fill  green  on the  lt g gt  means an automatic fill  green  on its child  lt rect gt   as long as it has no own fill specification    Your only option is to add a new  lt rect gt  to the SVG and place it accordingly to match the  lt g gt  children s dimensions

User · Answer

I know its long after this question was asked and answered - and I am sure that the accepted solution is right  but the purist in me would rather not add an extra element to the SVG when I can achieve the same or similar with straight CSS   Whilst it is true that you cannot style the g container element in most ways - you can definitely add an outline to it and style that - even changing it on hover of the g - as shown in the snippet   It not as good in one regard as the other way - you can put the outline box around the grouped elements - but not a background behind it  Sot its not perfect and won t solve the issue for everyone - but I would rather have the outline done with css than have to add extra elements to the code just to provide styling hooks   And this method definitely allows you to show grouping of related objects in your SVG s   Just a thought    x000D   x000D  g   x000D      outline  solid 3px blue  x000D      outline-offset  5px  x000D      x000D   x000D  g hover   x000D   outline-color  red x000D    x000D   lt svg width  640  height  480  xmlns  http   www w3 org 2000 svg  gt  x000D     lt g gt  x000D       lt rect fill  blue  stroke-width  2  height  112  width  84  y  55  x  55  stroke-linecap  null  stroke-linejoin  null  stroke-dasharray  null  stroke   000000   gt  x000D       lt ellipse fill   FF0000  stroke   000000  stroke-width  5  stroke-dasharray  null  stroke-linejoin  null  stroke-linecap  null  cx  155  cy  65  id  svg 7  rx  64  ry  56   gt       x000D     lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

You actually cannot draw Container Elements  But you can use a  foreignObject  with a  SVG  inside it to simulate what you need   http   jsfiddle net VBmbP 4    lt svg width  640  height  480  xmlns  http   www w3 org 2000 svg  gt         lt foreignObject id  G  width  300  height  200  gt           lt svg gt             lt rect fill  blue  stroke-width  2  height  112  width  84  y  55  x  55  stroke-linecap  null  stroke-linejoin  null  stroke-dasharray  null  stroke   000000   gt             lt ellipse fill   FF0000  stroke   000000  stroke-width  5  stroke-dasharray  null  stroke-linejoin  null  stroke-linecap  null  cx  155  cy  65  id  svg 7  rx  64  ry  56   gt                lt  svg gt             lt style gt                 G                   background   cff  border  1px dashed black                                 G hover                   background   acc  border  1px solid black                             lt  style gt         lt  foreignObject gt       lt  svg gt

User · Answer

The style that you give the  g  element will apply the child elements  not the  g  element itself   Add a rectangle element and position around the group you wish to style   See  https   developer mozilla org en-US docs Web SVG Element g  EDIT  updated wording and added fiddle in comments

[javascript] How to style SVG <g> element?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to svg