convert SVG to Highcharts.SVGRenderer.prototype.symbols
0
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
javascript svg highcharts
asked Nov 13 '18 at 11:53
McruzMcruz
133
add a comment |
0
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
javascript svg highcharts
asked Nov 13 '18 at 11:53
McruzMcruz
133
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34
add a comment |
0
0
0
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
javascript svg highcharts
asked Nov 13 '18 at 11:53
McruzMcruz
133
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
javascript svg highcharts
javascript svg highcharts
asked Nov 13 '18 at 11:53
McruzMcruz
133
asked Nov 13 '18 at 11:53
McruzMcruz
133
asked Nov 13 '18 at 11:53
McruzMcruz
133
asked Nov 13 '18 at 11:53
McruzMcruz
133
asked Nov 13 '18 at 11:53
McruzMcruz
133
133
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34
add a comment |
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34
add a comment |
1 Answer
1
active
oldest
votes
1
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/
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280482%2fconvert-svg-to-highcharts-svgrenderer-prototype-symbols%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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/
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
add a comment |
1
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/
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
add a comment |
1
1
1
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/
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
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/
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
answered Nov 13 '18 at 14:03
ppotaczekppotaczek
4,151129
4,151129
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280482%2fconvert-svg-to-highcharts-svgrenderer-prototype-symbols%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't understand what issue you are facing. The jsfiddle you linked, has a path defined in the same way as the path from your SVG. What is stopping you from applying the logic from the jsfiddle and formatting your SVG path in the same way? The x, y, h, w part is only to make the path scale with the size of the chart.
– ewolden
Nov 13 '18 at 12:28
i've never worked with svg, and don't understand which letter is which number and the x,y,h and w variables, also I don't see how to convert the path string to the formulas inside the function
– Mcruz
Nov 13 '18 at 12:55
You can use: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths to understand what M,L,C etc does. x,y is the placement in the SVG, and h,w is the height and width. You don't have to use x,y,h,w at all to be able to create a working SVG (but it will not be scaleable without them). Make an attempt.
– ewolden
Nov 13 '18 at 13:34