CODEWITHSUNDEEP
htmlcssangularfirefoxsvg
JohnDizzle
JohnDizzle

Reputation: 1338

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

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 enter image description here

Upvotes: 5

Views: 3341

Answers (4)

Shtole
Shtole

Reputation: 348

I just have noticed, that one has to add units (px) to make r, x, y work in Firefox v. 102:

.ring
{
    r: 150px; /* r: 150; not working */
}

Fortunately, units work in both Chrome and Firefox.

It's interesting, that the following rules work with no units:

.ring
{
    cx: calc(var(--svg-width) / 2);
    cy: calc(var(--svg-height) / 2); /* calc() works with no 'px' */
    stroke-width: 5; /* stroke-width works too. */
}

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 124219

We used to need to use attributes for cx, cy, r if you wanted it to work anywhere other than Chrome but now Safari and Firefox have caught up and your code should work in all those browsers.

Having cx, cy and r as styles is a new feature of the SVG 2 specification. Many attributes are now mapped CSS properties instead.

Upvotes: 0

Ken Lin
Ken Lin

Reputation: 1919

@JohnDizzle, while Chrome has supported circle's css r attribute for a long while, I noticed my most recent version of Firefox 74.0b8 on Mac, now does as well.

Also, Safari 13.0.5 supports css r, although I don't recall if it did not do so in the past.

Upvotes: 1

FK82
FK82

Reputation: 5075

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>

Upvotes: 4

Related Questions