Highcharts рендерер: цвет заливки внедренного SVG изображения

Question

Я добавление SVG-графики на основе моей диаграммы путем chart.renderer.image(), как показано на 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" 

это меняет его от черного до белого. Но я хотел бы иметь возможность устанавливать этот цвет динамически, в коде. Я пробовал разные пути без успеха. Есть идеи?

Answer 1

Если вы добавляете изображение с помощью Highcharts Renderer, изображение будет добавлено. Для того, чтобы добавить SVG элемент, который будет иметь возможность динамически изменять его атрибуты использовать другие методы Renderer, которые создают SVG элементы как:

• 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.

EDIT: С помощью Highcharts Renderer можно воссоздать элементы SVG из оригинального SVG-изображения. Вы можете загрузить SVG динамически с помощью JQuery, но проблема CORS может быть проблемой, так что можно также использовать SVG из HTML:

Demo: (. Для получения дополнительной информации см комментарии ниже) http://jsfiddle.net/2mch6ja3/