How to add a CSS transform or filter to an existing inline SVG transform or filter? - css

Question

Without knowing what the inline SVG transform or filter is, how can I apply extra transforms or filters to the same element using CSS?
Whatever I try, my CSS transform or filter overwrites the inline SVG transform/filter, instead of adding to it.
For example I have in my SVG:
<circle r="50" transform="translate(100,100)">
And then I try to scale this circle using a CSS transform, without removing its initial translate transform:
circle {
transform: initial scale(0.5);
}
However, the original translate is replaced by the scale transform, they are not added.
The same problem applies to filters.

Answer 1

As #ccprog says. Wrap the element in a parent <g> element, and apply your transform or filter to that.
<g>
<circle r="50" transform="translate(100,100)">
</g>
g {
transform: scale(0.5);
}
However, be aware that may give a different result to what you are expecting.
The following two SVGs are not equivalent.
<g transform="scale(0.5)">
<circle r="50" transform="translate(100,100)">
</g>
<g>
<circle r="50" transform="translate(100,100) scale(0.5)">
</g>
You would need to modify the transform you apply to the group to get an equivalent result.
The equivalent of
<g>
<circle r="50" transform="translate(100,100) scale(0.5)">
</g>
is either
<g transform="scale(0.5) translate(100,100)">
<circle r="50" transform="translate(100,100)">
</g>
or
<g transform="translate(50,50) scale(0.5)">
<circle r="50" transform="translate(100,100)" fill="blue"/>
</g>