Javascript Highcharts渲染器：嵌入式SVG图像的填充颜色

我通过

chart.renderer.image（）

将基于SVG的图形添加到图表中，如图所示：

在原始SVG文件本身中，我可以通过以下方式更改SVG中图形的填充颜色：

style="fill:#ffffff;fill-opacity:1"

---

这将它从黑色变为白色。但我希望能够在代码中动态设置此颜色。我尝试过各种方法，但都没有成功。有什么想法吗？

如果您使用Highcharts渲染器添加图像，则会添加图像。要添加能够动态更改其属性的SVG元素，请使用创建SVG元素的其他呈现器方法，如：

• 路径

  -

• rect

  -

• 圆圈

  -

等等

您的图像是一组路径，因此应该很容易实现。 例如：

如果需要，可以将所有元素添加到自定义元素中

编辑： 可以使用Highcharts渲染器从原始SVG图像重新创建SVG元素。您可以使用jQuery动态加载SVG，但CORS问题可能是一个问题，因此也可以从HTML使用SVG：

演示：

---

（有关更多信息，请参阅下面的评论。）

不可能使用图像。但它不是真正的图像。这是SVG，我希望在添加SVG时或之后可以动态修改元素。例如，类似于函数名的内容暗示它是一个图像，文档确认它是一个图像：您确定在通过

image（）

添加时SVG没有保留吗？它真的转换成位图了吗？在不丢失SVG的情况下将SVG添加到图表中的任何其他方法，以及通过编程修改元素的能力？就外部访问而言，它还可以是光栅。有很多方法，但它们不一定可以通过highcharts获得。但是，如果您有（很多）现有的SVG图形，您是否建议将所有这些都移植到“本机”highcharts路径命令中？有没有办法使用现有的SVG，以某种方式直接嵌入SVG？@drmrbrewer不幸的是，Highcharts中没有默认API允许将外部SVG作为chart的SVG的一部分。但是，如果您有SVG元素，您可以尝试追加child-更多信息：使用

renderer.image（）

并使用类似以下内容如何：（或此等效帖子：）我正在获取文件$。获取加载和CORS错误：

“无法加载XMLHttpRequesthttp://cloud3squared.com/files/example.svg. 请求的资源上不存在“Access Control Allow Origin”标头。起源'http://fiddle.jshell.net“因此不允许访问。”

，但是如果您从您的/相同的服务器加载SVG，应该不会有问题。我正在使用Chrome插件在JSFIDLE中解决它。我通过jQuery加载SVG，并使用1/2按路径重建路径（关于删除的注释：）Access Control Allow Origin问题似乎没有得到解决-控制台中出现了相同的错误。使用上述插件，一切正常。如果文件加载到网页中，则也可以在Highcharts中使用它-

style="fill:#ffffff;fill-opacity:1"