Элемент круга SVG Cx Cy R

Question

Я использовал SVGcircleElement.cx (cy и r) и начал писать его в моем основном CSS таким образом:

circle{
    cx: 50;
    cy: 50;
    r: 20;
    fill: none;
    stroke: var(--white);
    stroke-width: 3;
}

Но я понял, что это не работаетв Mozilla, поэтому я поместил его в html таким образом, и он работает везде:

<circle cx="50" cy="50" r="20"/>

Однако, поскольку у меня есть несколько кругов, я хотел бы использовать css и не повторять мойСам много раз в html.Кто-нибудь знает, как написать это, чтобы это работало?(Я уже пробовал moz-cx: 50;, но, очевидно, он не работал)