- From: Alexander Surkov <surkov.alexander@gmail.com>
- Date: Tue, 31 Mar 2015 16:20:00 -0400
- To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
- Cc: "public-pfwg@w3.org" <public-pfwg@w3.org>
- Message-ID: <CA+epNsfMT--2F_ExADaY+Ewc4LFzRkA9A1tZkc2R9GKBoqk=gg@mail.gmail.com>
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