svg translate option is not working for g when defined in css

Question

I want to translate g#node using CSS

#node{
    transform: translate(200, 50);
} 

<svg id="canvas" width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <g id="node">
        <rect width="104" height="27" rx="15" ry="15" id="node-2" transform="translate(30, 50)" ></rect>
        <rect width="104" height="20" rx="15" ry="15" id="node-1" transform="translate(10, 20)" ></rect>
    </g>
</svg>

But the translate option is not working from CSS. But if I replace translate() with scale(2) everything is working. Also when I set translate inside <g> element everything is working too.

How I can set translate from CSS?

Answer 1

The problem is associated with the translation unit. You need to explicitly mention that unit is px or what ever it is.

#node {
  transform: translate(200px, 50px);
}

<svg id="canvas" width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <g id="node">
    <rect width="104" height="27" rx="15" ry="15" id="node-2" transform="translate(30, 50)"></rect>
    <rect width="104" height="20" rx="15" ry="15" id="node-1" transform="translate(10, 20)"></rect>
  </g>
</svg>

Answer 2

I think you have to use the SVG transform. The CSS variant is limited for SVG.

This article (CSS-TRICKS: SVG Animation and CSS Transforms: A Complicated Love Story) and this (CSS-TRICKS: Transforms on SVG Elements) is maybe also interesting.