CSS transform-origin on <g> element for centered rotation?

Question

I don't quite understand the transform-origin CSS rule.

If you have a plain <svg> with changing sizes (width, height) and some <rect> elements in it, how can you rotate a <g> element in it correctly?

It should be right next to the <rect>, so I am using transform: translate(x,y).

Then I'd like to rotate the group with rotate(45), but it ends up at strange places:

HTML

<div class="box">
    <svg class="svg-main" width="600px" height="600px">
        <rect x="0" y="50" width="90" height="40" fill="blue" stroke="blue"></rect>
        <g transform="translate(100,50),rotate(7)"
        transform-origin="center"
        class="group">
        <path d="M38.15,20.54,28.9,11.29a1.4,1.4,0,0,0-2.4,1v1.89a1.41,1.41,0,0,1-1.4,1.41H3.2A1.4,1.4,0,0,0,1.79,17v9.11a1.41,1.41,0,0,0,1.41,1.4H25.1a1.41,1.41,0,0,1,1.4,1.41v1.89a1.41,1.41,0,0,0,2.4,1l9.25-9.25A1.41,1.41,0,0,0,38.15,20.54Z"  stroke="#000" strokeMiterlimit="10" strokeWidth="2"/>
    </g>
    </svg>
</div>

CSS

div.box {
    padding: 30px;
    background-color: #dfcfcf;
}
svg.svg-main {
    background-color: white;
    border: 2px solid #dedada;
}

svg.svg-main g.group path {
    fill: rgba(215, 20, 45, 0.5);
}

JSFiddle

https://jsfiddle.net/bair_web/ajLgzoey/

Result for 17deg

Where is the origin?

Question

I would like to rotate the group with its <path> and using center for transform-origin.

MDN

How can I achieve a simple, centered rotation of a group in an SVG, which is also translated? It seems like transform-origin points to the parent element (the SVG)? So do I need to calculate the position of the<g> element relative to the <svg> elment and use it for transform-origin?

Because, when I just omit the origin, the rotated group also moves around and does not keep its center.