如何重用高图生成的SVG作为背景

Question

我正在生成一个网格，这是使用highcharts生成的SVG，我想将其重新用作几张图片（<img src=https://xxx.xx.xxx.xx/pic_1.svg>和pic_2.svg）的背景？

我认为可能可以先将网格SVG导出到文件，然后将其用作文件。但是，无论如何，是否只是保存Highchart.SVGRender或Highchart.SVGElement并使用它，而不是导出到我认为会很慢的I / O文件而不是导出到文件？

谢谢。

Answer 1

您可以通过串联data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg">来解析新字符串，生成SVG outerHTML值，然后通过生成的字符串设置image.src。这是“逐步”实现它的方法：

使用Highcharts中的SVGRenderer创建新的 SVG 元素：

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

然后，让我们创建一个新的空<img>元素。

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

最后，通过新生成的值设置<img> src属性：

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

实时示例：https://jsfiddle.net/864s9cwz/