I have been asked to make use of highcharts/stackcharts for a project I’m working on. Our Artist designed a look and feel that matches other components that we are making use of. I need to change the shape and size of the tooltips and the handles on the navigator. Basicly I need to skin the charts.
I can’t use another charting library at this stage as we already committed to highchars but if this isn’t possible, then that would be a deal breaker for us.
The Stackcharts documentation states this:
handles: Object
Options for the handles for dragging the zoomed area. Available options are backgroundColor and borderColor.
This is not good enough :(
I also tried drawing a custom tooltip with this code:
tooltip: {
useHTML: true,
formatter: function () {
var st = '<div style="background-color:#ff8000"><svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="#ffdd55" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn></div>';
return st;
}
}
http://jsfiddle.net/pdDk4/
But the svg gets drawn into the border and it’s doesn’t seem like I can replace it without hacking it :(
I don’t want to do that.
I have investigated and goggle’d for hours without any success. Is there anyone who knows how I can accomplish this?
Please Sir, can I some morrr customisation?
In case when you set useHTML as true, then you can set background in CSS.
http://jsfiddle.net/pdDk4/5/
formatter: function () {
var st = '<div class="tooltip">'+this.y+'</div>';
return st;
}
CSS:
.tooltip {
width:200px;
height:200px;
background:url('http://aeseda.psu.edu/wp-content/themes/theme-mingle/assets/images/placeholder.jpg');
}
I advice to not use SVG in this way, because in IE<8 tooltip will not appear, because older browseres uses VML.
The important thing to point out is that I needed to draw a custom shape as a background. The correct solution is to use something like raphaeljs or something similar to draw the custom shapes.
For the sake of simplicity, I have updated the fiddle to reflect the solution I was after. It’s not that much different than my original code but I must have been intoxicated when first asked the question. Here is the update fiddle:
http://jsfiddle.net/pdDk4/
With this you can draw custom shapes as backgrounds to your tooltips. Remember, this won’t work in IE8 but you can use something like raphaeljs to convert the SVG shapes to VML.
formatter: function () {
var st = '<svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="rgba(255, 150, 0, 0.8)" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn><div style="position:absolute;left:10px;top:10px">this.y =' + this.y + '<div>';
return st;
}
Related
I have a NodeList of DOM elements with id's conforming to the following pattern:
prefix-number
(e.g. square-115, circle-15, triangle-2, etc.)
From a certain id, I need a reference to all the elements in the NodeList that have the same number but a different prefix.
For example, from the element with id="ellipse-25", how can I reference all the elements that are with the same number but a different prefix (e.g. polygon-25, square-25), if any?
In JavaScript, what is the most efficient way to do this? Can it be achieved without multiple or no NodeList iterations?
P.S. Here is the sample NodeList, as asked by Gangadhar Jannu, though it is not necessary, as it is more a conceptual question rather than a practical one:
<NodeList length="36">
<path class="segm-lad segm-stroke" id="psax-1" POINTER-EVENTS="auto" d="M 436.508 173.867 A 192.267 192.267 0 0 0 270 77.7333 L 270 130 A 140 140 0 0 1 391.244 200 L 436.508 173.867 Z"></path>
<path class="segm-lad segm-stroke" id="psax-2" POINTER-EVENTS="auto" d="M 270 77.7333 A 192.267 192.267 0 0 0 103.492 173.867 L 148.756 200 A 140 140 0 0 1 270 130 L 270 77.7333 Z"></path>
<path class="segm-rca segm-stroke" id="psax-3" POINTER-EVENTS="auto" d="M 103.492 173.867 A 192.267 192.267 0 0 0 103.492 366.133 L 148.756 340 A 140 140 0 0 1 148.756 200 L 103.492 173.867 Z"></path>
<path class="segm-rca segm-stroke" id="psax-4" POINTER-EVENTS="auto" d="M 103.492 366.133 A 192.267 192.267 0 0 0 270 462.267 L 270 410 A 140 140 0 0 1 148.756 340 L 103.492 366.133 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-5" POINTER-EVENTS="auto" d="M 270 462.267 A 192.267 192.267 0 0 0 436.508 366.133 L 391.244 340 A 140 140 0 0 1 270 410 L 270 462.267 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-6" POINTER-EVENTS="auto" d="M 436.508 366.133 A 192.267 192.267 0 0 0 436.508 173.867 L 391.244 200 A 140 140 0 0 1 391.244 340 L 436.508 366.133 Z"></path>
<path class="segm-lad segm-stroke" id="psax-7" POINTER-EVENTS="auto" d="M 391.244 200 A 140 140 0 0 0 270 130 L 270 182.267 A 87.7333 87.7333 0 0 1 345.979 226.133 L 391.244 200 Z"></path>
<path class="segm-lad segm-stroke" id="psax-8" POINTER-EVENTS="auto" d="M 270 130 A 140 140 0 0 0 148.756 200 L 194.021 226.133 A 87.7333 87.7333 0 0 1 270 182.267 L 270 130 Z"></path>
<path class="segm-rca-lad segm-stroke" id="psax-9" POINTER-EVENTS="auto" d="M 148.756 200 A 140 140 0 0 0 148.756 340 L 194.021 313.867 A 87.7333 87.7333 0 0 1 194.021 226.133 L 148.756 200 Z"></path>
<path class="segm-rca segm-stroke" id="psax-10" POINTER-EVENTS="auto" d="M 148.756 340 A 140 140 0 0 0 270 410 L 270 357.733 A 87.7333 87.7333 0 0 1 194.021 313.867 L 148.756 340 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-11" POINTER-EVENTS="auto" d="M 270 410 A 140 140 0 0 0 391.244 340 L 345.979 313.867 A 87.7333 87.7333 0 0 1 270 357.733 L 270 410 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-12" POINTER-EVENTS="auto" d="M 391.244 340 A 140 140 0 0 0 391.244 200 L 345.979 226.133 A 87.7333 87.7333 0 0 1 345.979 313.867 L 391.244 340 Z"></path>
<path class="segm-lad segm-stroke" id="psax-13" POINTER-EVENTS="auto" d="M 354.744 247.293 A 87.7333 87.7333 0 0 0 247.293 185.256 L 260.821 235.742 A 35.4667 35.4667 0 0 1 304.258 260.821 L 354.744 247.293 Z"></path>
<path class="segm-lad segm-stroke" id="psax-14" POINTER-EVENTS="auto" d="M 247.293 185.256 A 87.7333 87.7333 0 0 0 185.256 292.707 L 235.742 279.179 A 35.4667 35.4667 0 0 1 260.821 235.742 L 247.293 185.256 Z"></path>
<path class="segm-lad segm-stroke" id="psax-15" POINTER-EVENTS="auto" d="M 185.256 292.707 A 87.7333 87.7333 0 0 0 292.707 354.744 L 279.179 304.258 A 35.4667 35.4667 0 0 1 235.742 279.179 L 185.256 292.707 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-16" POINTER-EVENTS="auto" d="M 292.707 354.744 A 87.7333 87.7333 0 0 0 354.744 247.293 L 304.258 260.821 A 35.4667 35.4667 0 0 1 279.179 304.258 L 292.707 354.744 Z"></path>
<path class="segm-lad" id="a3c-2" POINTER-EVENTS="auto" d="M 174.4 72.6 c -2.2 1.1 -3.9 -0.9 -6.1 -0.8 c -1.1 0 -2 0.6 -2.9 1 c -4.5 1.9 -9.2 3 -13.8 3.8 c -3.6 0.7 -7.3 1.1 -11 2.3 c -1.6 0.5 -3.2 0.8 -4.8 0.9 l 2.1 19.8 c 4.9 -0.7 10.4 -1.9 15.9 -3.5 c 1.8 -0.5 8.2 -2.5 9.9 -3.2 c 6.2 -2.7 8.9 -4.3 14.8 -7.1 c 1.6 -0.8 4.4 -2.4 5.8 -3.4 c 1 -0.7 6.1 -4.2 6.1 -8.2 c 0 -2.5 -9.3 -5.1 -11.6 -4.3 C 177.2 70.4 176.1 71.8 174.4 72.6 Z"></path>
<path class="segm-rca-cx" id="a3c-5" POINTER-EVENTS="auto" d="M 152.3 201 c 13.2 1.4 25.6 -2.5 39 -2.7 c 4.6 0 9.1 0.6 13.5 -0.5 c 2.6 -0.7 5.3 -1 7.7 -2.4 c 1.1 -0.6 2.1 -1.3 3.1 -2 c 3.6 -2.3 5.5 -6.5 5 -10.7 c -0.5 -3.9 -2 -7.6 -5.1 -10.5 c -2.2 -2 -4.8 -2.7 -7.7 -3.1 c -1.4 -0.1 -2.8 -0.2 -4.2 -0.2 c -1.7 0.9 -3.6 1.4 -5.5 2.2 c -0.8 0.3 -1.6 0.9 -2.4 1.2 c -3 1.1 -5.8 2.2 -8.8 3.2 c 0 -0.1 0 -0.2 0 -0.3 c -3.2 0.9 -6.3 1.9 -9.7 2 c -3.7 0.1 -7.1 0.6 -10.8 0.6 c -1.2 0 -3.5 -0.6 -4.7 -0.5 c -3.9 0.2 -2.9 1.3 -6.8 1.6 c -1.4 0.1 -6 -1.5 -7.7 -1.8 c -3.4 -0.7 -6.8 -1.3 -10.2 -2.1 l -5.7 22.1 C 138.4 199.3 145.2 200.2 152.3 201 Z"></path>
<path class="segm-rca-cx" id="a3c-11" POINTER-EVENTS="auto" d="M 83.9 177.3 c 3 0.8 13.5 5.8 15.7 6.8 c 4.5 2.1 6.4 2.9 10.3 4.6 c 8.3 3.6 11.1 4.8 17.1 7 c 1.5 0.6 3 1 4.5 1.5 l 5.7 -22.1 c -0.8 -0.2 -1.6 -0.4 -2.4 -0.6 c -5.1 -1.4 -10 -3.5 -14.5 -6.3 c -5.4 -0.5 -5.8 -3.8 -8.6 -7.7 c -1.1 -1.5 -3.3 -2.2 -3.5 -3.2 c -0.2 -0.9 1.1 -1.5 0.8 -2.4 c -1 -2.8 -3.9 -2.8 -6 -4 c -0.6 -0.4 -1.3 -1.2 -2 -1.5 c -2.2 -0.7 -4.2 -1.5 -6.4 -2.1 c -2.8 -0.7 -5.7 -0.8 -8.4 -1.5 s -4.9 -1.9 -5.8 -2.2 c -2.6 -0.6 -4.9 -1.1 -7 -1.7 l -8.9 28.4 C 70.2 173 76.5 175.3 83.9 177.3 Z"></path>
<path class="segm-lad" id="a3c-8" POINTER-EVENTS="auto" d="M 127.4 80.3 c -3.2 0.4 -6.2 -0.1 -9.4 -0.1 c -0.6 0.3 -1.3 0.5 -2 0.5 c -9.9 -0.8 -26 0 -38.9 0.9 l 2.7 19.7 c 5.4 -0.9 10.9 -0.6 16.5 -0.7 c 6.8 -0.1 13 0.4 19.4 0.2 c 4 -0.1 8.1 -0.5 12.1 -0.4 c 2.7 0.1 6.2 -0.2 10.1 -0.7 l -2.1 -19.8 C 133.1 80.1 130.2 79.9 127.4 80.3 Z"></path>
<path class="segm-lad-cx" id="a3c-16" POINTER-EVENTS="auto" d="M 23 147.9 c 1.4 0.9 2.8 1.8 4.2 2.6 c 14.1 8.1 24.7 14.6 37.1 19.9 l 8.9 -28.4 c -6.6 -1.7 -11.4 -3.7 -18 -9.6 c -0.7 -0.6 -0.9 -1.7 -0.3 -2.5 c 0.8 -1 2.1 -1.5 3.1 -2.5 c 0.9 -0.9 0.7 -2.4 -0.6 -2.9 c -6.2 -2.3 -11.9 2.2 -18 1.7 c -1.6 -0.1 -2.4 -0.4 -2.6 -0.7 H 23 V 147.9 Z"></path>
<path class="segm-lad" id="a3c-14" POINTER-EVENTS="auto" d="M 75.2 81.6 c -12.1 0.9 -24 4 -35 9.2 c -6.3 3 -13 6.4 -17.3 9 v 25.7 h 13.9 c -0.4 -0.4 0.4 -0.9 0.6 -1 c 2.8 -1.1 7.9 0.6 8.3 -3 c 0.2 -1.3 -2.3 -1.5 -2.7 -2.8 c -0.5 -2 2.4 -1.5 3.4 -2.3 c 1 -0.8 0.9 -2.7 2.3 -2.9 c 1.7 -0.3 3.7 0.4 5 -0.9 c 0.5 -0.5 0.6 -1.3 1 -1.8 c 0.5 -0.6 1.6 -0.6 2.3 -1.1 c 0.9 -0.7 3.3 -2.2 4.1 -2.8 c 2 -1.4 2.6 -1.8 5.1 -2.8 c 0.6 -0.3 1.7 -0.5 2.4 -0.5 c 3 0 5.9 -0.1 8.8 -2 c 0.8 -0.2 1.6 -0.3 2.4 -0.5 L 77 81.5 C 76.4 81.5 75.8 81.6 75.2 81.6 Z"></path>
<path class="segm-rca-lad" id="a4c-9" POINTER-EVENTS="auto" d="M 74.6 93.2 c 1.4 2.5 -2.2 4.7 -1.8 7.6 c 0.3 2.1 3 1.2 3.4 2.9 c 1.3 6.3 1.2 13 3.2 18.1 c 1.9 4.8 0 15.4 5.9 19 c 1.2 0.8 -1.2 1.2 -1.6 1.9 c -0.6 1.1 -0.5 2 -0.2 2.8 l 23.9 -3.1 c -0.2 -2.4 0.9 -5.1 -0.7 -7.3 c -0.8 -1.1 -1.8 -2.1 -2.8 -3.1 c -0.9 -0.9 0.3 -1.8 1.1 -2.7 c 0.8 -0.9 0.3 -2.2 0.5 -4.2 c 0.4 -4.2 -0.8 -8.2 -2.6 -12.1 c -0.6 -1.3 1.1 -3.2 0.3 -4.8 c -3.4 -6.5 -4.8 -13 -5.8 -20.1 H 72 C 72.7 89.7 73.6 91.4 74.6 93.2 Z"></path>
<path class="segm-rca" id="a4c-3" POINTER-EVENTS="auto" d="M 86.5 149.7 c 3.9 6.2 3.3 13 6.3 19.4 c 0 0.1 0.1 0.1 0.1 0.2 c 2.1 4.5 4.3 9.7 4.9 15.1 c 0.4 3.2 0.8 7.1 0.8 7.1 c 0.3 2.4 2.4 7.5 3 8 c 1.4 1 3.6 0.9 5 0 c 1 -0.7 1.4 -1.6 2 -3 c 0.7 -1.6 2 -5 2 -5 s 1.1 -2.8 2.2 -5.7 c 1 -5.4 0.4 -10.9 1.3 -16.3 c 1.7 -9.8 -3.2 -17.7 -6.5 -25.9 c -0.2 -0.4 -0.3 -0.9 -0.3 -1.3 l -23.9 3.1 C 84.1 146.9 85.6 148.2 86.5 149.7 Z"></path>
<path class="segm-lad" id="a4c-14" POINTER-EVENTS="auto" d="M 72.8 25.9 c -1.4 2.5 -2.4 5.1 -2.8 7.6 c -1.5 8.7 -1.8 27.8 -1.8 27.8 c 0.3 6.3 0.2 15.1 2 21.4 c 0.5 1.9 1.1 3.5 1.8 5.2 h 25.3 c 0 -0.3 -0.1 -0.5 -0.1 -0.8 c -0.4 -2.7 0.3 -5.6 0.2 -8.4 c -2.7 -7.7 -4 -14.4 -4.8 -19.3 c -1.5 -10.6 -1.8 -17.1 0 -20 c 2.6 -4.4 2 -7.4 2.3 -8.7 c 0.3 -1.6 3.3 -1.1 3.7 -1.3 c 0.6 -0.4 1.2 -0.7 1.8 -1 l -2.3 -8.8 L 72.8 25.9 Z"></path>
<path class="segm-lad" id="a4c-17" POINTER-EVENTS="auto" d="M 98 19 l 0.2 0.7 l 31.6 -7.7 c -11.4 -5.6 -24.1 -8.2 -37.2 -5.6 C 88.5 7.2 78 16.2 72.8 25.9 l 25.4 -6.2 L 98 19 Z"></path>
<path class="segm-lad-cx" id="a4c-6" POINTER-EVENTS="auto" d="M 225.1 158.2 c -0.3 -4.3 -0.8 -8.5 -1.4 -12.7 c -1.7 -11.4 -7 -21.7 -12.6 -32.2 l -29 12.9 c 0.3 0.5 0.7 1 1 1.5 c 0.6 0.8 0.5 2.4 0.8 3.7 c 0.7 4.3 4.9 6.7 6.5 10.7 c 1.9 4.9 6.5 9.2 7.9 14.5 c 0 0 1 3.9 2.4 9.4 c 0.6 2.4 1.6 4.6 3 6.6 c 1.7 2.4 3.4 4.4 5 5 c 3.5 1.5 7.2 1.5 9 1 c 3.2 -0.9 5.8 -4.6 7.4 -10.3 c 0.3 -0.9 0.4 -1.9 0.4 -2.8 C 225.4 163 225.3 160.6 225.1 158.2 Z"></path>
<path class="segm-lad-cx" id="a4c-12" POINTER-EVENTS="auto" d="M 205.9 103.4 c -8.5 -16.7 -18 -32.5 -29.8 -46.9 L 149.3 77 c 0.3 1.5 1.1 3.1 1.3 4.5 c 2.9 4.4 1.6 9.8 1.4 21.7 c -0.1 4.4 0 9.8 0.6 16.3 c 1.4 16.3 8.6 8.1 12 3 c 4 -6 4.9 -16.9 6 -16 c 4.1 3.4 -1.2 5.3 3.9 7.9 c 3.6 1.9 4.9 7.6 7.5 11.8 l 29 -12.9 C 209.3 110 207.6 106.7 205.9 103.4 Z"></path>
<path class="segm-lad-cx" id="a4c-16" POINTER-EVENTS="auto" d="M 161.2 40.6 c -4.2 -4 -6 -9.7 -10.3 -13.7 c -6.3 -5.9 -13.4 -11 -21.2 -14.8 l -31.6 7.7 l 2.3 8.8 c 2.9 -1.3 5.9 -1.2 9.2 -0.1 c 1.1 0.3 2.1 2.7 3 3.1 c 2.1 0.8 1 -3 5.6 0.6 c 3.4 2.7 6.5 4.6 8.4 6.4 c 8.3 8.2 12.6 9.4 16 19 c 4.5 12.7 9.6 13.3 7 17 c -0.5 0.7 -0.5 1.6 -0.3 2.5 L 176 56.5 C 171.5 51 166.6 45.6 161.2 40.6 Z"></path>
<path class="segm-lad" id="a2c-15" POINTER-EVENTS="auto" d="M 54.6 30 c -0.1 0.1 -0.1 0.2 -0.2 0.3 c -5 7.1 -13.9 24.4 -17.4 32.5 c -1.7 3.9 -4.2 9.5 -6.8 15.5 l 29.4 8.4 c 0.3 -0.3 1.8 -2.1 2.2 -5 c 0.5 -3.3 0 -9.3 0 -9.3 s 2.5 0 4 -2.8 c 1.5 -2.8 1.5 -7.1 2.8 -9.1 c 1.3 -2 2.8 -3 4.8 -3.5 c 2 -0.5 2.8 -2 3.3 -3.5 c 0.5 -1.5 1.8 -7.1 1.8 -7.1 s 0.5 3.8 3 3.8 c 0.1 0 0.2 0 0.3 0 V 30 H 54.6 Z"></path>
<path class="segm-lad" id="a2c-17" POINTER-EVENTS="auto" d="M 107.9 30 c -7 -8.4 -19.6 -18.3 -29 -18.3 c -10.4 0 -19.1 11.3 -24.2 18.3 h 27.2 H 107.9 Z"></path>
<path class="segm-rca" id="a2c-4" POINTER-EVENTS="auto" d="M 3.3 169.9 c -0.3 4.8 -0.8 4.5 0 11.6 c 0.8 7.1 5 23.7 9.8 33.8 c 4.1 8.6 18.8 19.6 21.4 17.3 c 9 -8 0.6 -16 -0.6 -19.5 c -1.3 -3.5 -6.3 -11.1 -7.1 -17.6 c -0.8 -6.5 0 -12.6 -0.3 -15.6 c -0.3 -3 -1 -5.8 -2 -6.8 c -1 -1 1.8 0.3 1.8 0.3 s 0.8 -6.8 1.3 -10.8 c 0.5 -4 2 -2.5 2 -2.5 c 0.4 -2 0.9 -4.6 1.4 -7.6 l -24 -7 C 5.2 153.4 3.6 162.7 3.3 169.9 Z"></path>
<path class="segm-rca" id="a2c-10" POINTER-EVENTS="auto" d="M 22.9 96.6 c -3.5 10.1 -11.3 30.7 -13.9 40.3 c -0.7 2.5 -1.4 5.4 -2 8.4 l 24 7 c 1.6 -8.3 4.1 -19.1 8.5 -25.7 c 2.3 -3.5 0.3 10.8 3 19 c 3 9 9 3 11 -5 c 4 -10 5.8 -31.8 5.8 -37.9 s 0.3 -15.9 0.3 -15.9 s 0 0 0.1 -0.1 l -29.4 -8.4 C 27.5 84.6 24.7 91.3 22.9 96.6 Z"></path>
<path class="segm-lad" id="a2c-13" POINTER-EVENTS="auto" d="M 128.7 70.1 c -3.5 -13.9 -12.3 -28.5 -18.6 -37.3 c -0.6 -0.9 -1.4 -1.9 -2.2 -2.8 H 81.8 v 20.2 c 2.3 -0.1 3.7 -1.2 3.7 -1.2 s 0.3 3.3 3.3 5.3 c 3 2 4.3 0 4.3 0 s 1.8 3.8 2.8 5 c 1 1.3 1.8 4.5 3 8.8 c 1.3 4.3 4.9 13.6 5 16.9 c 0 0.2 0 0.3 0 0.5 l 26.8 -6.9 C 130.1 75.5 129.4 72.7 128.7 70.1 Z"></path>
<path class="segm-lad" id="a2c-7" POINTER-EVENTS="auto" d="M 138.1 119.5 c -1 -10.3 -4.2 -27.4 -7.3 -40.9 l -26.8 6.9 c 0.3 6 2.5 4.8 2.5 4.8 s 1.3 10.8 1.3 18.6 c 0 7.8 -2.3 22.4 -0.8 29.7 c 0.7 3.4 2.5 8.3 4.4 13.5 l 28.6 -7.4 C 139.3 136.2 138.8 126.6 138.1 119.5 Z"></path>
<path class="segm-lad" id="a2c-1" POINTER-EVENTS="auto" d="M 141.6 160.8 c -0.7 -3.4 -1.2 -9.4 -1.7 -16.1 l -28.6 7.4 c 2.1 5.8 4.3 11.8 4.9 16.3 c 1.3 8.3 2.8 14.6 2 22.7 c -0.4 4.4 0.2 9.7 -0.8 13.5 c -0.8 3.1 -4.6 13.2 2 16 c 7 3 16.8 -10.8 19 -14 c 4 -6 3.7 -8.2 6 -17 C 146.8 180.7 143.1 168.6 141.6 160.8 Z"></path>
</NodeList>
Given the NodeList in your scenario already exists, it's hard to see how it can be done without iterations.
However, an alternative could be to create the NodeList according to the desired id, in the first place.
For example:
let getRelatedElements = id =>
document.querySelectorAll('[id$="-'+id.replace(/\D/g, '')+'"]:not(#'+id+')');
This uses a combination of an attribute-selector to select elements with the same numerical suffix and a :not selector to ignore the element with the original id.
I'm trying to add a point into a SVG-Path at a certain position on the path.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 48 241 C 50 13 129 26 130 238 C 138 521 214 431 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>
Furthermore, I would like to add a point in the Path (curve), so that the path (curve) doesn't deform.
The point is e.g. "C x1 y1 x2 y2 210 331".
My question:.
How can I determine the controls x1 y1 x2 y2?
E.g. "C 100 100 100 500 210 331" is wrong, because the curve will be deformed.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d= "M 48 241 C 50 13 129 26 130 238 C 100 100 100 500 210 331 C 210 331 210 331 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>
In other words the point (x = 210, y = 331) is given. Wanted are controls "x1 y1 x2 y2".
See here for more explanation
(In order to add a graphic in “stackoverflow.com”, it is needed some points. But I haven’t enough points, therefore I inserted a link)
Thanks in advance.
For given font, and given string, how to get polygon points like these in the picture below, in JavaScript?
(I am aware of related questions on SO, but they are for Python or other languages/environments; I would like JavaScript only solution, if possible)
EDIT: Following up #Roman's the answer:
Using typeface.js online tool, I converted a TrueType font to typeface.js format. Each letter is represented similar to this: (here is representation of letter d)
"d": {
"x_min": 135.640625,
"x_max": 792.171875,
"ha": 928,
"o": "m 135 998 l 330 998 q 792 499 763 933 q 330 0 763 65 l 135 0 l 135 998 m 330 151 q 648 499 635 211 q 330 846 635 786 l 287 846 l 287 151 l 330 151 "
},
The key part of typeface.js code for rendering a letter based on this format is:
switch(action) {
case 'm':
ctx.moveTo(outline[i++], outline[i++]);
break;
case 'l':
ctx.lineTo(outline[i++], outline[i++]);
break;
case 'q':
var cpx = outline[i++];
var cpy = outline[i++];
ctx.quadraticCurveTo(outline[i++], outline[i++], cpx, cpy);
break;
case 'b':
var x = outline[i++];
var y = outline[i++];
ctx.bezierCurveTo(outline[i++], outline[i++], outline[i++], outline[i++], x, y);
break;
}
Some work has already been done for typeface.js, a javascript library that replaces regular text with "canvas rendered one" (so you can use arbitrary font-faces).
typeface.js accomplishes this by using font definition data, which essentially holds the drawing instructions for each glyph. The data for the glyph "A" might look like this:
m 253 638 l 379 949 q 394 945 387 946 q 409 944 401 944 q 443 949 428 944
q 565 629 525 733 q 673 359 605 526 q 822 0 740 192 q 773 3 804 0 q 736 7
743 7 q 686 4 709 7 q 650 0 664 1 q 588 199 609 137 q 532 355 567 261 l
370 355 l 210 355 l 159 205 q 127 110 142 161 q 99 0 112 59 l 43 6 q 6 3
20 6 q -14 0 -8 0 q 74 211 29 105 q 155 403 119 317 q 253 638 191 490 m
370 422 l 502 422 l 371 760 l 240 422 l 370 422
(I inserted newlines).
This string is a sequence of drawing operations with their respective numerical parameters. For example "m 253 638" corresponds to "move to x:253 y:638" and "l 379 949" being "draw line to x:379 y:949". etc, etc..
You should have a look at the source here:
http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js
You could adapt that renderer to extract your poligons. The major trick here is to let this page do the hard work for you and create the font definitions.
I'm trying to get an SVG to automatically scale down and fit vertically into its parent container.
The SVG is of a signature, and I want it to shrink vertically to fix into the div in question. Once this happens the width of the div will always be more than large enough to accommodate the rest of the svg.
The fiddle I have is here, and the markup is below.
http://jsfiddle.net/3v4e4/2/
Just messing with it, it looks like setting the viewBox equal to "0,0,1100,100" is about right, but I can't for the life of me generalize a rule for calculating that.
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 80 c 0.11 -0.19 3.59 -7.64 6 -11 c 5.2 -7.24 11.51 -13.76 17 -21 c 1.92 -2.53 3 -5.62 5 -8 c 6.6 -7.87 14.55 -15.43 21 -23 c 0.93 -1.09 1.95 -4.23 2 -4 c 0.14 0.71 -0.63 9.58 0 14 c 0.66 4.6 2.28 9.6 4 14 c 1.22 3.11 3 6.5 5 9 c 1.79 2.23 4.59 4.25 7 6 c 1.17 0.85 2.68 1.83 4 2 c 3.55 0.44 8.37 0.86 12 0 c 7.09 -1.67 14.75 -6.24 22 -8 c 4.65 -1.13 15 -1 15 -1"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 21 52 c 0.12 -0.07 4.58 -3 7 -4 c 3.13 -1.29 6.72 -2.51 10 -3 c 3.14 -0.47 10 0 10 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 108 64 c -0.02 -0.75 -0.75 -28.06 -1 -43 c -0.09 -5.56 -0.26 -10.84 0 -16 c 0.07 -1.33 0.21 -3.74 1 -4 c 2.11 -0.7 7.51 -0.39 11 0 c 2.31 0.26 4.63 1.58 7 2 c 3.27 0.58 6.88 0.08 10 1 c 11.18 3.3 23.97 7.93 34 12 c 1.18 0.48 2.27 1.86 3 3 c 2.16 3.35 4.65 7.3 6 11 c 1.2 3.3 1.61 7.33 2 11 c 0.28 2.63 0.68 5.63 0 8 c -1.82 6.37 -4.98 13.73 -8 20 c -1.21 2.51 -2.98 5.17 -5 7 c -5.02 4.56 -11.2 9.21 -17 13 c -2.67 1.75 -5.93 3.14 -9 4 c -5.08 1.42 -10.52 2.26 -16 3 c -7.11 0.96 -13.85 1.58 -21 2 l -13 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 185 85 c 0.1 -0.26 4.17 -9.78 6 -15 c 2.97 -8.48 4.86 -16.77 8 -25 c 2.24 -5.89 5.71 -11.27 8 -17 c 1.01 -2.51 1.01 -6.02 2 -8 c 0.43 -0.86 2.4 -2.3 3 -2 c 1.31 0.65 3.69 3.81 5 6 c 3.61 6.01 7.11 12.56 10 19 c 1.4 3.13 2.26 6.59 3 10 c 0.93 4.3 0.84 8.79 2 13 c 3.16 11.44 11 34 11 34"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 247 78 c 0.04 -0.05 2 -2.16 2 -3 c 0 -1.04 -1.01 -3.46 -2 -4 c -2.03 -1.11 -6.17 -0.95 -9 -2 c -6.05 -2.24 -11.84 -5.89 -18 -8 c -6.45 -2.21 -13.17 -3.73 -20 -5 c -7.69 -1.43 -23 -3 -23 -3"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 280 87 c 0.04 -0.32 1.03 -11.97 2 -18 c 0.72 -4.44 2.28 -8.54 3 -13 c 1.31 -8.08 1.67 -16.57 3 -24 c 0.25 -1.37 1.71 -2.7 2 -4 c 0.32 -1.46 -0.11 -5.14 0 -5 c 0.2 0.27 2.38 6.09 3 9 c 0.33 1.54 -0.35 3.42 0 5 c 3.87 17.56 11.56 49.11 13 54 c 0.09 0.32 1.93 -1.97 2 -3 c 0.8 -11.75 -0.18 -27.39 1 -41 c 0.82 -9.44 3.67 -24.16 5 -28 c 0.21 -0.6 3.43 0.92 4 2 c 4.46 8.42 9.16 21.76 14 32 c 0.69 1.47 2.39 2.63 3 4 c 0.62 1.4 0.27 3.58 1 5 c 4.32 8.37 10.8 17.06 15 26 c 3.4 7.25 8 23 8 23"/></svg>
</div>
For scaling of an svg to work, you absolutely have to supply a viewBox which matches the bounding box of the contained elements. In your case that would be something like viewBox="0 0 360 100".
The bounding box can be calculated via javascript, but as I have read the getBBox() method is buggy in some cases. I can't comment further on that, but in this case and on chrome it works, see: http://jsfiddle.net/3v4e4/7/
Note that both getBBox() and setAttribute() are native methods and for setting the viewBox you absolutely have to use these. Using the jquery ´.attr()` method will not work as the SVG DOM is different from the HTML DOM which jquery is designed for: http://keith-wood.name/svg.html#dom
If you're using a modern browser, you might be able to just use your SVG as the src for an IMG and set the height to 100%.
Example: http://jsfiddle.net/kj7Wh/
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" />
</div>
might not work everywhere, but the zoom command on the svg element
svg{zoom:32%;}
or, you can save the this as an svg file and edit this inside illustrator
I was looking through some of the files used in Vexflow and I'm trying to add new glyphs for the score however, I don't know what code is being used here in the vex.flow.font.js file:
Vex.Flow.Font = {"glyphs":{"vb":{"x_min":0,"x_max":428.75,"ha":438,"o":"m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}
To my understanding, the code above is referenced by another file (glyph.js) to render an svg. Any help would be greatly appreciated, thank you :)
Vex.Flow.Font = {"glyphs": {
"vb": {
"x_min": 0,
"x_max": 428.75,
"ha": 438,
"o": "m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}}}
glyphs is a list of glyphs, mapping them from their code to their info. So vb is a glyph code, and the map with four values is its description. x_min and x_max describe horizontal metrics. x_min set to zero means start drawing the glyph at the current cursor point, and the value of x_max specifies cursor's movement to the right. I have no idea what is ha and what does it do. o is the outline of the glyphs to be rendered. It is described in a format similar to SVG paths. For the start, m 262 186 means move to pixel (262, 186), b 273... means draw a bezier curve with these points, etc.