svg -> zaokrąglone rect'y przez css

Dzień dobry.

Mam powiedzmy taki fragment kodu:

<rect id="kbmp-f1" height="40" width="40" y="40.685" x="118.53" rx="5" ry="5"/> <!--F1-->
<rect id="kbmp-f2" height="40" width="40" y="40.685" x="158.53"/> <!--F2-->

jest to fragment svg. Pierwszy rect, ma zdefiniowane atrybuty rx i ry (radius). Dzięki czemu, jego rogi są zaokrąglone, Ale jak zrobić to samo z drugim (i setką innych), bez ręcznego klepania w każdym z nich tego rx="5 ry="5"?

Wiem, że można w svg zdefiniować styl. Jednak nie działa jak dam tam każdą z tych alternatyw od drugiej kolejno:

rect {
   fill: blue; /*to akurat działa, ale to co poniżej już nie*/
}

rect { 
   border-radius: 10px; /* tak samo 10, 10pt 5 etc*/
}

rect {
   rx: 5;
   ry: 5;
/* NIE DZIAŁA */
}

Proszę o pomoc, bo klepanie setkę razy rx i ry to ostateczność i wolałbym jej uniknąć :D

Dzięki
M.

PS.
Póki co radzę sobie tym:

<script>
    var el = document.querySelectorAll("rect");

    for (var i = 0; i < el.length; i++) {
        el[i].setAttribute("rx", "5");
        el[i].setAttribute("ry", "5");
    }
</script>

Spróbuj użyć wartości transform, lub clip-path i w ten sposób to jakoś zaokrąglić, ale nie czy któryś sposób zadziała w Twoim przypadku.

Ewentualnie jeśli takie rozwiązanie Ci pasuję to zamiast konkretnego elementu, można zaokrąglić całą ikonkę i użyć overflow: hidden żeby nie wystawała.

<div>
   <svg>
       <rect id="kbmp-f2" height="40" width="40" y="40.685" x="158.53" />
       <path ... />
       <path ... />
   </svg>
</div>

div {
  width: auto;
  border-radius: 10px;
  overflow: hidden;
}

według specyfikacji rx i ry powinno zadziałać od SVG2, ale musisz podać jednostkę:

rect {
   rx: 5px;
   ry: 5px;
}

OK, a jak nadać margines? Da się? Jak robię:

rect {
   transform-origin: center;
   transform: scale(0.8);
}

to mi skaluje ale skleja zmniejszone elementy ze sobą tak, że efekt jest takbym zmniejszył cały obrazek. Za to:

rect {
   margin: 5px;
}

Nie działa wcale. :(

inset też nie działa:

rect {
    rx: 5px;
    ry: 5px;
    transform-origin: center;
    inset: 5px;
}

Już mam!

rect {
    rx: 5px;
    ry: 5px;
    width: 30px;
    height: 30px;
    transform-origin: center;
}

A jakby kogo interesowało, tu lista właściwoścu recta
https://riptutorial.com/svg/topic/2993/rectangle