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

【问题标题】：remove inline styles from svg in highcharts从highcharts中的svg中删除内联样式
【发布时间】：2013-09-04 13:41:20
【问题描述】：

我最近开始为一个项目寻找 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 文件。

例如

<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- 这也有助于稍微整理标记，但改变了这些对象的创建方式，我是否过于雄心勃勃？

提前致谢，

会。

【问题讨论】：

标签： javascript html css svg highcharts

【解决方案1】：

向元素添加类属性应该可以工作 - 请检查：

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

特别是这个：

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

【讨论】：

啊，好的...所以使用 svg 支持添加类，这是一个好的开始。虽然我现在的问题是如何让 Highcharts 添加此类而不是添加内联样式。 :-)
恐怕你不能单独使用设置来做到这一点，你必须重写渲染器方法。内联样式的存在是为了让 Highcharts 快速读取 SVG 和 VML 中的值。我们正在计划一个纯 SVG 版本，其中所有样式都将在类中完成。
@Torstein - 这将非常有用。当不支持 SVG 时，我禁用了图表，因为我们只需要 SVG。我一直在删除尽可能多的添加样式，并且能够在一些地方使用类，但不是全部。谢谢你的更新。

【解决方案2】：

Highcharts 5 引入了样式模式！您现在可以使用 css 为图表设置样式，这将消除对所有内联样式的需求。 Style by CSS - highcharts.com

【讨论】：