CODEWITHSUNDEEP
svghighcharts
Bin Fang
Bin Fang

Reputation: 35

How to reuse a SVG generated from highcharts as background

I am generating a grid, which is a SVG generated using highcharts and I want to reuse it as background of couple of pictures (<img src=https://xxx.xx.xxx.xx/pic_1.svg> & pic_2.svg) how to get this done?

I think might be possible to export the grid SVG to a file first then use it as a file. However, is there anyway simply save a Highchart.SVGRender or Highchart.SVGElement and use it, instead of exporting to a file, which I think will be slow I/O?

thank you.

Upvotes: 0

Views: 164

Answers (1)

daniel_s
daniel_s

Reputation: 3732

You can parse a new string by concatenation of data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg">, generated SVG outerHTML value, and then setting yourimage.src by generated string. Here is how to achieve it 'step by step':

Create new SVG element using SVGRenderer from Highcharts:

var dot = chart.renderer.circle(10, 10, 10)
    .attr({
    fill: 'red',
    zIndex: 99
  })
  .add()

Then, let's create new empty <img> element.

<img id="dot" src='' alt="">

And finally, set <img> src attribute by new generated value:

var svgString = dot.element.outerHTML
var dotImg = document.getElementById('dot')
var string = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">'+svgString+'</svg>'

dotImg.src = string

Live example: https://jsfiddle.net/864s9cwz/

Upvotes: 1

Related Questions