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

时间:2013-09-04 13:41:21

标签: javascript html css svg highcharts

我最近开始关注一个项目的Highcharts,到目前为止我已经设法获得了我需要的图表,但我唯一的问题是与图表一起创建的过多标记膨胀。举个例子:

<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">

这只代表图表中的2个对象,每次可以看到颜色,字体,位置和填充都被添加为内联样式...

没有太多暴露于SVG,这是一个要求吗?我希望能够做的是在文本中添加一个类,比如'hc-txt',然后我可以设置颜色,字体,位置和填写我的CSS文件。

e.g。

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

查看了src文件,我已经能够将前缀从highcharts缩短为hc-这也有助于整理标记,但改变了这些对象的创建方式,我是否过于雄心勃勃?

提前致谢,

威尔

1 个答案:

答案 0 :(得分:1)

为元素添加class属性应该有效 - 请检查:

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

,特别是这一个:

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