CODEWITHSUNDEEP
svgchartspie-chart
designarti
designarti

Reputation: 629

SVG pie-chart working only in Chrome, not in Firefox

Trying to generate a piechart in SVG. Works fine in Chrome, but it doesn't work in Firefox. Any ideas? The slice is 35% of the pie. Added PI to calculate the slice. I think I've done everything correctly. Tried latest Firefox in both Mac and Windows. Same result. Slice doesn't show up. Had to add calc() to do the right math.

    <svg height="20" width="20" viewBox="0 0 20 20" style="width: 500px; height: auto;">
        <circle r="10" cx="10" cy="10" fill="#F2FBFF" />
        <circle r="5" cx="10" cy="10" fill="transparent" stroke="#21BAFF" stroke-width="10" stroke-dasharray="calc(35 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
    </svg>

Upvotes: 2

Views: 318

Answers (1)

ccprog
ccprog

Reputation: 21821

Firefox does not support the use of CSS functions in presentation attributes. You have to use true CSS properties.

In its current state, presentation attributes are fiddly business. Not everything the SVG spec and various CSS specs propose is implemented. Here are a few rules I use to stay on the safe side:

  • Never use Geometry properties (x, y, rx, height, ...) as CSS properties. There is not enough support yet.
  • calc() and other CSS functions can only be used in CSS style rules. Always add units.
  • transform as an attribute and transform as a CSS property are to be considered distinct methods with differing syntax. (Center of transformation, use of units, spacing and comma rules)

Now for your problem, you can use

style="stroke-dasharray:calc(35 * 31.42px / 100) 31.42px"

but note the use of the px unit. Without it, Firefox will fail you.

<svg height="20" width="20" viewBox="0 0 20 20" style="width: 500px; height: auto;">
        <circle r="10" cx="10" cy="10" fill="#F2FBFF" />
        <circle r="5" cx="10" cy="10" style="fill:transparent;stroke:#21BAFF;stroke-width:10;stroke-dasharray:calc(35 * 31.42px / 100) 31.42px" transform="rotate(-90) translate(-20)" transform="rotate(-90) translate(-20)" />
    </svg>

Upvotes: 6

Related Questions