Styling of SVG circle doesn´t work in Firefox, browser removes radius property

Issue

I'm trying to create a kind of progress ring with an SVG and CSS, which worked so far in Chrome. However, Firefox (61.0.1 (64-bit)) causes me problems and doesn't show my circle. I have already tried to use the method from this question, but without success. Is there a way to style the ring to display correctly in both Chrome and Firefox (both in the latest version)? Is it problematic, that I add styles with [ngStyles] during runtime? this is needed to calculate the space and the shown progress

I have a running example on code sandbox for you, which also just is working for chrome, but not for Firefox.

HTML

<div class="my-progress-ring">
    <svg>
        <circle class="progress" [ngStyle]="getCircleStyles()"/>
    </svg>
</div>

CSS

div.my-progress-ring {
  width: 50px;
  height: 50px;
}

svg {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
}

circle.progress {
  stroke: red;
  stroke-width: 4px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  cx: 50%;
  cy: 50%;
  fill: transparent;
}

Typescript

public getCircleStyles(): any {
    return {
      'r': 21,
      'stroke-dasharray': 131.947,
      'stroke-dashoffset': 32.987
    };
  }

---

EDIT:
The numbers for the getCircleStyles are hardcoded in this example. In my app i´m using a function to calculate the numbers depending on the size of the progress ring and the current progress.

EDIT 2:
It seems that Firefox doesn't like some properties of values of my stlying. The r property is missing

Solution

Seems like you found an inconsistent implementation of the SVG 2.0 spec in Firefox. Or, maybe Firefox does not fully support SVG 2.0 yet. The specification states that:

Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes.

So, both style sheets and attributes should work.

---

The quick fix is to add r, cxand cy presentation attributes to your circle element (as suggested here):

<circle _ngcontent-c1="" class="progress" style="stroke-dasharray: 131.947; stroke-dashoffset: 32.987;" cx="50%" cy="50%" r="21" fill="transparent" ng-reflect-ng-style="[object Object]"></circle>

Answered By - FK82