CODEWITHSUNDEEP
javascriptcssinternet-explorersvgmicrosoft-edge
Quentin D
Quentin D

Reputation: 421

Circle in SVG rotated on IE and Edge

This is driving me mad, I can't figure why a simple <circle/> is rotated at 180deg on IE and Edge.

It looks like a bug of the browser, but I can't let it that way.

Maybe you know a CSS hack that can fix the issue because this is only a problem of CSS update in the viewport.

The proof: when you click on the circle - in IE, not Edge - it returns back to its normal rotation (but the js doesn't affect at all the rotation of the circle...)

Here's the demo (at the bottom) : http://charraire.dev.adelios.fr/notre-organisation/

Compare with Chrome / Firefox and IE / Edge and you will see the big difference.

If someone could help me he'd become my savior!

Upvotes: 0

Views: 910

Answers (1)

Quentin D
Quentin D

Reputation: 421

Hehe... Actually I solved it by trying to do a jsFiddle.

The fact is that IE and Edge have trouble updating the SVG properties with javascript if they aren't already declared (in the DOM or the CSS).

I explain myself:

  • I have several <circle/> elements in my DOM and they all have r, cx and cy attributes.
  • I give them stroke and stroke-width directly in my CSS.
  • Then, with javascript, I update their stroke-dasharray and stroke-dashoffset.

But IE and Edge don't like when you update these attributes with javascript IF YOU HAVEN'T SPECIFIED THEM IN THE FIRST PLACE (God knows why).

So my solution was simply to add stroke-dasharray="0" and stroke-dashoffset="0" in the <circle/> elements. And magic! It works!

Or, even simpler, I just added stroke-dasharray: 0; and stroke-dashoffset: 0; in my CSS, and it works too.

Hope that it would help someone else.

Upvotes: 1

Related Questions