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无法在Mozilla中运行，因此我将其放在 html 中，并且在任何地方都可以完美运行：

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

但是，由于我有多个圈子，我很想使用css，而不希望在html中重复很多次。有人知道如何编写使其起作用吗？ （我已经尝试过moz-cx: 50;，但显然没有用）