RE: SVG syntax question

Will do, thanks.



From: Alexander Surkov [mailto:surkov.alexander@gmail.com]
Sent: Tuesday, March 31, 2015 1:20 PM
To: Bryan Garaventa
Cc: public-pfwg@w3.org
Subject: 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<mailto: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>