I have some SVG elements grouped together in a <g>
element. I just want to style that <g>
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 <g>
element, but it doesn't work. How it would be possible? Thanks in advance!
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g fill="blue" stroke="2">
<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"/>
<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"/>
</g>
</svg>
This question is related to
javascript
jquery
html
css
svg
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.
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.
g {_x000D_
outline: solid 3px blue;_x000D_
outline-offset: 5px;_x000D_
}_x000D_
_x000D_
g:hover {_x000D_
outline-color: red_x000D_
}
_x000D_
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">_x000D_
<g>_x000D_
<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"/>_x000D_
<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"/> _x000D_
</g>_x000D_
</svg>
_x000D_
You cannot add style to an SVG <g>
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 <g>
means an automatic fill="green"
on its child <rect>
(as long as it has no own fill
specification).
Your only option is to add a new <rect>
to the SVG and place it accordingly to match the <g>
children's dimensions.
Source: Stackoverflow.com