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

标签 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 文件。

例如

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

提前致谢

将.

最佳答案

向元素添加类属性应该有效 - 请检查:

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

特别是这个:

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

关于javascript - 从 highcharts 中的 svg 中删除内联样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18615516/

相关文章:

html - 电子邮件可以从本地主机服务器获取图像 Url 吗?

html - 当没有足够的空间时如何开始缩小同级div

html - 具有自己的流程的 CSS float 注释

javascript - 打开弹出窗口后谷歌浏览器上出现奇怪的行,如何避免?

javascript - 在 React componentDidUpdate 中调度 redux 操作

javascript - Wordpress - wp_enqueue_script/wp_enqueue_style 不起作用

javascript - 客户端 PNG 压缩使用像 pngcrush 这样的 javascript?

javascript - 如何在 php 中设置变量并在 javascript 中使用它

Javascript 拖动事件不起作用

jquery - 如何以最小的影响重新启动 CSS 动画