Re: SVG syntax question

I'd say this is correct SVG and Firefox doesn't handle it properly. May I
ask you to file a bug please?
In the meantime you can do a workaround by placing title element into path
elements.
Thanks.
Alex.

On Tue, Mar 31, 2015 at 2:55 PM, Bryan Garaventa <
bryan.garaventa@ssbbartgroup.com> wrote:

> Hi,
> I'm experimenting with a couple of things, and am trying to get the syntax
> correct for an SVG chart that includes accessible text.
>
> Is the below syntax correct for doing this? If yes, it appears to be
> broken in FF.
>
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310"
> preserveAspectRatio="xMinYMin meet" width="100%" height="100%">
> <title> Pie Chart Title </title>
> <g transform="translate(157.5 157.5)">
> <g class="arc">
> <title> Component A 0% </title>
> <path class="is-selected" style="fill: #13a7ff; stroke: #13a7ff;
> stroke-width: 0;" transform="scale(1.05)" d="M 8.75622e-015 -143 A 143 143
> 0 0 1 2.60797 -142.976 L 0 0 Z" />
> </g>
> <g class="arc">
> <title> Component B 1% </title>
> <path class="" style="fill: #0872b0; stroke: #fff; stroke-width: 1px;"
> transform="" d="M 2.60797 -142.976 A 143 143 0 0 1 7.82044 -142.786 L 0 0
> Z" />
> </g>
> <g class="arc">
> <title> Component C 13% </title>
> <path class="" style="fill: #79cc26; stroke: #fff; stroke-width: 1px;"
> transform="" d="M 7.82044 -142.786 A 143 143 0 0 1 107.253 -94.5823 L 0 0
> Z" />
> </g>
> <g class="arc">
> <title> Component D 16% </title>
> <path style="fill: #3f9818;" d="M 107.253 -94.5823 A 143 143 0 0 1 136.67
> 42.0758 L 0 0 Z" />
> </g>
> <g class="arc">
> <title> Component E 34% </title>
> <path style="fill: #ffd042;" d="M 136.67 42.0758 A 143 143 0 0 1 -106.821
> 95.0703 L 0 0 Z" />
> </g>
> <g class="arc">
> <title> Component F 37% </title>
> <path style="fill: #f86f11;" d="M -106.821 95.0703 A 143 143 0 0 1
> -1.53278e-013 -143 L 0 0 Z" />
> </g>
> </g>
> </svg>
>
>

Received on Tuesday, 31 March 2015 20:20:28 UTC