Highcharts 渲染器：嵌入 SVG 图像的填充颜色答案

【问题标题】：Highcharts renderer: fill colour of embedded SVG imageHighcharts 渲染器：嵌入 SVG 图像的填充颜色
【发布时间】：2016-07-30 14:42:51
【问题描述】：

我正在通过chart.renderer.image() 将基于SVG 的图形添加到我的图表中，如this jsfiddle example 所示：

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    }, function (chart) { // on complete

    chart.renderer.image('https://cloud3squared.com/files/example.svg', 100, 100, 70, 70)
            .add();
    });
});

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

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

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

【问题讨论】：

图片不可能。
但这并不是真正的图像。它是 SVG，我希望在添加 SVG 时或之后可以动态修改元素。例如，stackoverflow.com/a/13225606/4070848
函数名称暗示它是一个图像并且文档确认它是一个图像：api.highcharts.com/highcharts#Renderer
您确定通过image() 添加时未保留SVG？它真的转换为位图吗？任何其他将 SVG 添加到图表而不丢失 SVG 并因此能够以编程方式修改元素的方式？
就外部访问而言，它也可能是一个光栅。方法有很多，但不一定能通过 highcharts 获得。

标签： javascript css svg highcharts

【解决方案1】：

如果您使用 Highcharts Renderer 添加图像，则会添加图像。要添加能够动态更改其属性的 SVG 元素，请使用另一个创建 SVG 元素的 Renderer 方法，例如：

path - http://api.highcharts.com/highcharts#Renderer.path
rect - http://api.highcharts.com/highcharts#Renderer.rect
circle - http://api.highcharts.com/highcharts#Renderer.circle

等等

您的图像是一组路径，所以应该很容易做到。示例：http://jsfiddle.net/32Lqpe14/

如果您愿意，可以将所有元素添加到自定义 group。

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

演示：http://jsfiddle.net/2mch6ja3/

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

【讨论】：

但是，在您拥有（大量）现有 SVG 图形的地方，您是否建议将所有这些图形移植到“本机”highcharts 路径命令中？有没有办法使用现有的 SVG，以某种方式直接嵌入 SVG？
@drmrbrewer 不幸的是，Highcharts 中没有默认 API 允许将外部 SVG 作为图表 SVG 的一部分。但是，如果您有 SVG 元素，您可以尝试 appendChild - 更多信息：stackoverflow.com/questions/16488884/…
坚持使用renderer.image() 并使用类似的东西怎么样：stackoverflow.com/a/11978996/4070848（或这个等效的帖子：stackoverflow.com/a/24933495/4070848）
我收到 $.get 加载和 CORS 错误："XMLHttpRequest cannot load http://cloud3squared.com/files/example.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access."，但如果您从您的/同一服务器加载 SVG，应该没有问题。我正在使用 Chrome "Allow-Control-Allow-Origin: *" 插件在 jsFiddle 中解决它。我通过 jQuery 加载 SVG 并使用 1/2 逐个路径重建路径
（关于删除的评论：） Access-Control-Allow-Origin 问题似乎没有得到修复 - 控制台中出现同样的错误。使用提到的插件一切都很好。如果文件被加载到网页中，那么也可以在 Highcharts 中使用它 - jsfiddle.net/2mch6ja3