CODEWITHSUNDEEP
javascriptsvghighcharts
Mcruz
Mcruz

Reputation: 45

convert SVG to Highcharts.SVGRenderer.prototype.symbols

I have an svg 

<g id="generic-_exportbutton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M1.5,23 C1.22385763,23 1,22.7761424 1,22.5 L1,4.5 C1,4.22385763 1.22385763,4 1.5,4 L9.5,4 C9.77614237,4 10,4.22385763 10,4.5 C10,4.77614237 9.77614237,5 9.5,5 L2,5 L2,22 L16,22 L16,12.5 C16,12.2238576 16.2238576,12 16.5,12 C16.7761424,12 17,12.2238576 17,12.5 L17,22.5 C17,22.7761424 16.7761424,23 16.5,23 L1.5,23 Z M20,9.24416185 C20,9.43190751 19.9315607,9.59468208 19.7946821,9.73248555 C19.6578035,9.87028902 19.4950289,9.93872832 19.3063584,9.93780347 C19.1176879,9.93687861 18.9549133,9.86843931 18.8180347,9.73248555 L16.9105202,7.8249711 L11.8436994,12.8917919 C11.7715607,12.9639306 11.6883237,13 11.5939884,13 C11.4996532,13 11.4164162,12.9639306 11.3442775,12.8917919 L10.1082081,11.6557225 C10.0360694,11.5835838 10,11.5003468 10,11.4060116 C10,11.3116763 10.0360694,11.2284393 10.1082081,11.1563006 L15.1750289,6.08947977 L13.2675145,4.18196532 C13.1306358,4.04508671 13.0621965,3.88231214 13.0621965,3.69364162 C13.0621965,3.5049711 13.1306358,3.34219653 13.2675145,3.20531792 C13.4043931,3.06843931 13.5671676,3 13.7558382,3 L19.3049711,3 C19.4927168,3 19.6554913,3.06843931 19.7932948,3.20531792 C19.9310983,3.34219653 19.9995376,3.5049711 19.9986127,3.69364162 L20,9.24416185 Z" id="Combined-Shape" fill="#0081FF" fill-rule="nonzero"></path>
</g>

and I want to convert it to use it as the export icon in Highcharts, but I don't find a way to do it, because the only way I found to do it is this

The problem is I don't know how to convert the SVG I have to that type that Highcharts needs

Upvotes: 0

Views: 654

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can edit d attrubite of the existing exporting button path element:

var exporting = $(".highcharts-exporting-group")[0].children[0].children[2];

exporting.setAttribute('d', "M1.5,23 C1.22385763,23 1,22.7761424 1,22.5 L1,4.5 C1,4.22385763 1.22385763,4 1.5,4 L9.5,4 C9.77614237,4 10,4.22385763 10,4.5 C10,4.77614237 9.77614237,5 9.5,5 L2,5 L2,22 L16,22 L16,12.5 C16,12.2238576 16.2238576,12 16.5,12 C16.7761424,12 17,12.2238576 17,12.5 L17,22.5 C17,22.7761424 16.7761424,23 16.5,23 L1.5,23 Z M20,9.24416185 C20,9.43190751 19.9315607,9.59468208 19.7946821,9.73248555 C19.6578035,9.87028902 19.4950289,9.93872832 19.3063584,9.93780347 C19.1176879,9.93687861 18.9549133,9.86843931 18.8180347,9.73248555 L16.9105202,7.8249711 L11.8436994,12.8917919 C11.7715607,12.9639306 11.6883237,13 11.5939884,13 C11.4996532,13 11.4164162,12.9639306 11.3442775,12.8917919 L10.1082081,11.6557225 C10.0360694,11.5835838 10,11.5003468 10,11.4060116 C10,11.3116763 10.0360694,11.2284393 10.1082081,11.1563006 L15.1750289,6.08947977 L13.2675145,4.18196532 C13.1306358,4.04508671 13.0621965,3.88231214 13.0621965,3.69364162 C13.0621965,3.5049711 13.1306358,3.34219653 13.2675145,3.20531792 C13.4043931,3.06843931 13.5671676,3 13.7558382,3 L19.3049711,3 C19.4927168,3 19.6554913,3.06843931 19.7932948,3.20531792 C19.9310983,3.34219653 19.9995376,3.5049711 19.9986127,3.69364162 L20,9.24416185 Z")

Live demo: http://jsfiddle.net/BlackLabel/bjzkun28/

Upvotes: 1

Related Questions