从highcharts中的svg中删除内联样式

Question

I have recently started looking at Highcharts for a project and so far I have managed to get the charts I need but the only problem I have is the excessive markup bloat which is created along with the charts. To give an example:

<text style="color: white; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; position: absolute; fill: white;" x="1288" y="252" zIndex="2">
<tspan style="font-weight: bold;" x="1288">
<text style="color: white; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; position: absolute; fill: white;" x="1288" y="452" zIndex="2">
<tspan style="font-weight: bold;" x="1288">

This represents just 2 objects in the chart and each time you can see the color, font, position and fill are added as an inline styles...

Having not had too much exposure to SVG, is this a requirement? What I would like to be able to do would be to add a class to the text, say 'hc-txt' then I can set the color, font, position and fill in my CSS file.

eg

<text class="hc-txt" x="1288" y="252">
<tspan x="1288">
<text class="hc-txt" x="1288" y="452">
<tspan x="1288">

Having looked in the src file, I have been able to shorten the prefix from highcharts- to hc- which also helps tidy up the markup a little but changing the way in which these objects are created, am I being over ambitious?

Thanks in advance,

Will.

Answer 1

Adding class attribute to the element should work - please check:

http://www.w3.org/TR/SVG/styling.html#StylingWithCSS

and specifically this one:

http://www.w3.org/TR/SVG/styling.html#ClassAttribute

Answer 2

Highcharts 5 introduces styled mode! you can now style the charts using css which will remove the need for all of the inline styles. Style by CSS - highcharts.com