Develop Reference

Adding numbering to SVG path shapes in JavaScript using .getBBox() method

I am trying to put numbers inside custom shapes. I am using getBBox() to find center of the shape. It works only on certain shapes, because center point may not be inside a hollow shape.
Demo on Codepen:
https://codepen.io/arindamx01/pen/KKyLNrj?editors=1010
Here is my JavaScript code:
let colorGroup = ['#700843', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
colorGroup.forEach( function(e, i) {
console.log(e, i);
$(`path[data-color-group = "${e}"]`).each(function(){
let pathBBox = $(this)[0].getBBox();
console.log(pathBBox, $(this)[0])
let getPathData = $(this).attr("data-index");
var svgNS = "http://www.w3.org/2000/svg";
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x", pathBBox.x + pathBBox.width/2);
newText.setAttributeNS(null,"y", pathBBox.y + pathBBox.height/2);
newText.setAttributeNS(null,"font-size","10");
var textNode = document.createTextNode(i+1);
newText.appendChild(textNode);
document.getElementById("myIdInfo").appendChild(newText);
});
});
I tried using getBBox() method but it is not working for all shapes.
In above image, the number 4 should be inside the hollow C shape.

Each shape is different center of the box may not be inside the actual shape. For those hollow shapes there are no exact centers. You just need to find any suitable point that falls inside the shape.
Considering center of the box as origin we can try to find points that intersect with x and y axis. And pick a point in between two intersections:
Demo on codesandbox. It'll take some time to load.
let sv = document.querySelector('svg');
let colorGroup = ['#700843', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
colorGroup.forEach(function (e, i) {
$(`path[data-color-group = "${e}"]`).each(function (ii, aa) {
let path = $(this)[0]
if (i == 3) {
path.setAttribute('style', `fill: #cf0acf`);
} else if (i == 0) {
path.setAttribute('style', `fill: #a35a83`);
} else {
path.setAttribute('style', `fill: ${e}`);
}
//console.log(pathBBox, path);
let getPathData = $(this).attr("data-index");
point = getInsidePoint(path);
var svgNS = "http://www.w3.org/2000/svg";
var newText = document.createElementNS(svgNS, "text");
newText.setAttributeNS(null, "x", point.x);
newText.setAttributeNS(null, "y", point.y);
newText.setAttributeNS(null, "font-size", "10");
var textNode = document.createTextNode(i + 1);
newText.appendChild(textNode);
document.getElementById("myIdInfo").appendChild(newText);
});
});
// figure out point insice the shape
function getInsidePoint(path) {
let pathBBox = path.getBBox();
let point = sv.createSVGPoint();
point.x = Math.floor(pathBBox.x + pathBBox.width / 2);
point.y = Math.floor(pathBBox.y + pathBBox.height / 2);
// if mid point is inside then return
if (path.isPointInFill(point)) {
return point;
}
let result = sv.createSVGPoint();
let l = path.getTotalLength();
let h = []; // horizontal intersections
let v = []; // vertical intersections
// find intersecting points along x and y axis
for (let i = 0; i < l; i++) {
let p = path.getPointAtLength(i);
p.x = Math.floor(p.x)
p.y = Math.floor(p.y);
if (p.x == point.x) v.push(p);
if (p.y == point.y) h.push(p);
}
// whichever axis has less intersecitions
// get center point of the intersection
try {
if (h.length < v.length) {
result.y = point.y;
// find out which point in between two intersection points falls inside
for (let i = 0; i < h.length - 1; i++) {
result.x = Math.abs(h[i + 1].x - h[i].x) / 2;
if (result.x < 2) continue;
result.x += Math.min(h[i + 1].x, h[i].x);
if (path.isPointInFill(result)) {
break;
}
}
} else {
result.x = point.x;
for (let i = 0; i < v.length - 1; i++) {
result.y = Math.abs(v[i + 1].y - v[i].y) / 2;
if (result.y < 2) continue;
result.y += Math.min(v[i + 1].y, v[i].y);
if (path.isPointInFill(result)) {
break;
}
}
}
} catch (e) {
// ignore errors for dots and open shapes
}
return result;
}
Here is how it looks:
Note, play with the getInsidePoint function to adjust number positions. This isn't the most efficient implementation, refer this answer for more efficient implementation approach.
Possible improvements could be:
Find out better points manually for each shape and put them in data-* attributes in path elements:
<path data-label-x='10' data-label-y='40' ...>...</path>
and use these co-ordinates. No need to calculate on client side every time.
If the diagram is scalable then mark similar shapes. And do calculations for only one shape and use the same point for all similar shapes considering rotation.

Since your graphic (mandala) has a radial layout, you might also try to find angle based intersections.
We can assume that shapes which don't have fill intersecting centers will have some intersections around the center x/y.
Essentially, we're also using isPointInFill() to first exclude already fine coordinates within the shape's fill area and then find appropriate (x/y shifted) alternatives for all exceptions.
This approach provides some "best match" logic – i.e. prefer intersecting coordinates with more surrounding space. Illustrated above by green dots: more intersections (array.length based) will be preferred to calculate the label's x/y coordinates.
We can drastically reduce the number of "checkpoints" by analyzing only some predictable and also prioritized (angle based) points around the shapes's center (retrieved by getBBox()).
This is still quite expensive regarding performance due to the graphic's complexity.
Example check points around center:
let svg = document.querySelector('svg');
let labelGroup = svg.querySelector('#myIdInfo');
let colorGroup = ['#CF0ACF', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
let decimals = 1;
let labelGroupMarkup = '';
//get svg viewBox dimensions for rotation checks;
let svgBB = svg.getAttribute('viewBox').split(' ');
let [svgCx, svgCy] = [(svgBB[0] + svgBB[2]) / 2, (svgBB[1] + svgBB[3] / 2)];
// count point checks for debugging
let checks = 0;
let pointHits = 0;
let notInFill = 0;
// loop colors
colorGroup.forEach(function(color, colorIndex) {
// find shapes
let shapes = svg.querySelectorAll('[data-color-group="' + color + '"] path');
shapes.forEach(function(shape, i) {
let bb = shape.getBBox();
let [x, y, w, h] = [bb.x, bb.y, bb.width, bb.height];
let cx = +(x + w / 2).toFixed(decimals);
let cy = +(y + h / 2).toFixed(decimals);
let l = +(x).toFixed(decimals);
let r = +(x + w).toFixed(decimals);
let t = +(y).toFixed(decimals);
let b = +(y + h).toFixed(decimals);
// label coordinates in fill?
let inFill = checkPointIntersection(svg, shape, [cx, cy]);
checks++;
//not in fill: find alternative coordinates
if (!inFill) {
notInFill++; //
let rMid = (w + h) / 2;
let angles = [0, 45, 90, 135, 180, 225, 270, 315];
// check quarter position to reduce angle checkpoints
let classRotate = '';
if (t < svgCy && b < svgCy && l < svgCx && r > svgCx) {
classRotate = 'topCenter';
angles = [0, 180]
} else if (l > svgCx && b < svgCy) {
classRotate = 'topRight';
angles = [45, 90];
} else if (l > svgCx && b > svgCy && t < svgCy && b > svgCy) {
classRotate = 'centerRight';
angles = [90, 0]
} else if (l > svgCx && t > svgCy) {
classRotate = 'bottomRight';
angles = [135, 180];
} else if (l < svgCx && t > svgCy && r > svgCx) {
classRotate = 'bottomCenter';
angles = [180, 0];
} else if (r < svgCx && t > svgCy) {
classRotate = 'bottomLeft';
angles = [225, 270];
} else if (r < svgCx && b > svgCy) {
classRotate = 'centerLeft';
angles = [270, 0];
} else if (r < svgCx && b < svgCy) {
classRotate = 'topLeft';
angles = [315, 270];
} else {
classRotate = 'center';
angles = [0];
}
//shape.classList.add(classRotate);
let labeCoords = checkCircleIntersects(svg, shape, angles, cx, cy, rMid / 4);
cx = labeCoords[0]
cy = labeCoords[1]
}
let value = colorIndex;
labelGroupMarkup +=
`<text x="${cx}" y="${cy}" dy="2" >${value}</text>`;
//test eventListener: set colors by color group
shape.addEventListener('click', function(e) {
let current = e.currentTarget;
let g = current.closest('[data-color-group]');
let color = g.getAttribute('data-color-group');
let shapeColor = current.getAttribute('fill');
if (!shapeColor) {
current.setAttribute('fill', color)
} else {
current.removeAttribute('fill')
}
})
})
// add labels
labelGroup.innerHTML = labelGroupMarkup;
});
console.log('totalchecks: ' + checks + ' notInFill: ' + notInFill + ' pointHits: ' + pointHits)
// helpers
function checkCircleIntersects(svg, shape, percentages, cx, cy, r, percentageToAngel = false) {
let interpoints = [];
let interpointspercent = [];
percentages.forEach(function(percent) {
// check intersections on for different radii
let pArr = [];
let steps = [0.75, 1, 1.25, 1.5, 1.75, 2, 2.25];
for (let i = 0; i < steps.length; i++) {
let p = getPosOnCircle(cx, cy, percent, r * steps[i], percentageToAngel);
let inFill = checkPointIntersection(svg, shape, p);
checks++;
if (inFill) {
pArr.push(p);
pointHits++;
}
}
// add matches to array
interpointspercent.push(pArr);
});
// return best match x/y coordinates
let bestMatchArr = getBestMatchArr(interpointspercent);
let bestMatch = getMidPoints(bestMatchArr);
if (!bestMatch.length) {
shape.setAttribute('fill', 'red')
console.log(`no match: ${cx} ${cy}`)
bestMatch = [cx, cy]
}
return bestMatch
}
function checkPointIntersection(svg, shape, coords, strokeIntersection = false) {
let svgP = svg.createSVGPoint();
svgP.x = coords[0];
svgP.y = coords[1];
let inFill = shape.isPointInFill(svgP);
let inStroke = strokeIntersection ? shape.isPointInStroke(svgP) : false;
//let inStroke = shape.isPointInStroke(svgP);
let intersecting = false;
if (inFill && !inStroke) {
intersecting = true;
}
return intersecting;
}
// helper: get x/y coordinates according to angle or percentage
function getPosOnCircle(cx, cy, value, radius, valueToPercent = false, decimals = 3, offset = -90) {
// convert percentages to angles
let angle = valueToPercent ? 360 / (100 / value) + offset : value + offset;
let x = +(cx + Math.cos((angle * Math.PI) / 180) * radius).toFixed(decimals);
let y = +(cy + Math.sin((angle * Math.PI) / 180) * radius).toFixed(decimals);
return [x, y];
}
// find longest intersection array
function getBestMatchArr(arrays) {
let max = 0;
let longestArr = [];
for (let i = 0; i < arrays.length; i++) {
let current = arrays[i];
let len = current.length;
if (len > max) {
max = len;
}
}
for (let i = 0; i < arrays.length; i++) {
let current = arrays[i];
let len = current.length;
if (len == max) {
longestArr.push(current);
}
}
let midIndex = longestArr.length > 1 ? Math.floor((longestArr.length - 1) / 2) : 0;
return longestArr[midIndex];
}
// interpolate first and last x/y
function getMidPoints(coords) {
let l = coords.length - 1;
let midIndex = Math.floor(l / 2);
let [x1, y1] = coords[0];
let [x2, y2] = coords[coords.length - 1];
let middle = [ +((x1 + x2) / 2).toFixed(1) , +((y1 + y2) / 2).toFixed(1) ];
return middle;
}
// debug helper: render coordinates as markers
function renderPoint(svg, coords, fill = 'red', r = '2') {
let marker =
'<circle cx="' +
coords[0] +
'" cy="' +
coords[1] +
'" r="' + r + '" fill="' + fill + '" ><title>' +
coords.join(", ") +
"</title></circle>";
svg.insertAdjacentHTML("beforeend", marker);
}
svg {
width: 50em;
border: 1px solid #ccc;
display: block;
}
text {
font-family: Arial;
font-weight: bold;
font-size: 6px;
text-shadow: -0.1em -0.1em 0 #fff, -0.1em 0 0 #fff, 0em -0.1em 0 #fff, 0em 0.1em 0 #fff, 0.1em -0.1em 0 #fff, -0.1em 0.1em 0 #fff, 0.1em 0.1em 0 #fff;
}
<svg viewBox="0 0 1144.4 1144.4">
<g class="wrap-stroke" stroke-width="1" stroke="#000" fill="#fff">
<g data-color-group="#E95C87" data-fillable="true">
<path d="M572.2 381.5c-14.5 0-27.7 3-37 15.2-7 9.2-9.4 20.5-7.7 31.7a65 65 0 0 1-18.7-17.1c5.3-21.6 25-35.2 37.9-52.3a172.1 172.1 0 0 0 25.5-49 172.1 172.1 0 0 0 25.5 49c12.9 17.1 32.5 30.7 37.9 52.3a65 65 0 0 1-18.7 17.1 41.3 41.3 0 0 0-7.7-31.7c-9.3-12.2-22.5-15.2-37-15.2z"/>
<path d="M707 437.3c-10.2-10.2-21.7-17.4-36.9-15.4a41.3 41.3 0 0 0-27.8 17c-2-8.3-2.4-16.9-1.1-25.3 19-11.5 42.6-7.2 63.8-10.2 18.4-2.6 36.1-8.4 52.6-16.6-8.2 16.6-14 34.2-16.6 52.6-3 21.2 1.3 44.7-10.2 63.8-8.4 1.3-17 .9-25.3-1.1a41.9 41.9 0 0 0 17-27.8c1.9-15.3-5.3-26.7-15.5-37z"/>
<path d="M437.4 437.3C427.2 447.5 420 459 422 474.2a41.3 41.3 0 0 0 17 27.8c-8.3 2-16.9 2.4-25.3 1.1-11.5-19-7.2-42.6-10.2-63.8a173.5 173.5 0 0 0-16.6-52.6c16.6 8.2 34.2 14 52.6 16.6 21.2 3 44.7-1.3 63.8 10.2 1.3 8.4.9 17-1.1 25.3a41.9 41.9 0 0 0-27.8-17c-15.3-1.9-26.7 5.3-37 15.5z"/>
<path d="M572.2 115.6a18.6 18.6 0 0 0-15 30 20.6 20.6 0 0 0-.5 27.9 20.6 20.6 0 0 0-6.5 23 85.8 85.8 0 0 0-33.4-7.7c-6.5-19.9-11.2-40.6 3.3-58.3a65.2 65.2 0 0 1 52.1-23.5c20.3 0 39 7.5 52.1 23.5 14.5 17.7 9.8 38.3 3.3 58.3-11.5.3-22.9 3-33.4 7.7 3.2-8.6.2-17.5-6.5-23 7.2-8 7-20.2-.5-27.9 9.3-12.3 1.2-30-15-30z"/>
<path d="M895 249.3a18.6 18.6 0 0 0-31.9 10.6c-9.9.1-19.2 7.7-20.1 19.4-8.6-.8-17 3.4-20.8 11.7a88 88 0 0 0-18.1-29.1c9.5-18.7 20.7-36.6 43.6-38.9 20.6-2 39.1 5.9 53.4 20.2a65.7 65.7 0 0 1 20.2 53.4c-2.3 22.8-20.2 34-38.9 43.6a86.3 86.3 0 0 0-29.1-18.1c8-3.7 12.7-12.1 11.7-20.8a20.3 20.3 0 0 0 19.4-20.1 18.5 18.5 0 0 0 10.6-31.9z"/>
<path d="M249.4 249.3a18.6 18.6 0 0 0 10.6 31.9c.1 9.9 7.7 19.2 19.4 20.1-.8 8.6 3.4 17 11.7 20.8a88 88 0 0 0-29.1 18.1c-18.7-9.5-36.6-20.7-38.9-43.6a65.6 65.6 0 0 1 20.2-53.4 65.6 65.6 0 0 1 53.4-20.2c22.8 2.3 34 20.2 43.6 38.9a86.3 86.3 0 0 0-18.1 29.1 20.4 20.4 0 0 0-20.8-11.7 20.3 20.3 0 0 0-20.1-19.4 18.5 18.5 0 0 0-31.9-10.6z"/>
<path d="M572.2 472.3c-3.8-9.5-9.8-18-17.6-24.6-5.8-7.8-10-16.5-7.3-26.5 3-11.1 13.9-16.3 24.9-16.2 11-.2 21.9 5.1 24.9 16.2 2.7 10-1.5 18.7-7.3 26.5a62.7 62.7 0 0 0-17.6 24.6z"/>
</g>
<g data-color-group="#AED9C5" data-fillable="true">
<path d="M572.2 268.5a17.8 17.8 0 0 0-17.9 17.7c0 8.4 6 15.3 13.8 17.2a136.8 136.8 0 0 1-29.8 48.9 33 33 0 0 1-21.5-29.7 70.6 70.6 0 0 1 11.8-40.6c12.9-19.5 31.3-34.6 43.5-54.6 12.2 20 30.6 35.1 43.5 54.6a69.1 69.1 0 0 1 11.8 40.6 33 33 0 0 1-21 29.5l-.5.2a136.8 136.8 0 0 1-29.8-48.9 18 18 0 0 0 13.8-17.2c.2-9.8-8-17.8-17.7-17.7z"/>
<path d="M786.9 357.4c-6.8-6.9-18.3-7-25.1-.2a18 18 0 0 0-2.4 21.9c-17.4 8.4-36.4 13-55.7 13.5l-.2-.5a33 33 0 0 1 6-35.7 68.6 68.6 0 0 1 37.1-20.3c23-4.7 46.6-2.3 69.4-7.8-5.5 22.8-3.2 46.5-7.8 69.4a70.3 70.3 0 0 1-20.3 37.1 33 33 0 0 1-35.7 6l-.5-.2c1.4-19.3 4.3-38.4 13.5-55.7 6.8 4.2 16 3.5 21.9-2.4 6.8-7 6.8-18.2-.2-25.1z"/>
<path d="M357.5 357.4c-6.9 6.8-7 18.3-.2 25.1a18 18 0 0 0 21.9 2.4c8.4 17.4 13 36.4 13.5 55.7l-.5.2a33 33 0 0 1-35.7-6 68.6 68.6 0 0 1-20.3-37.1c-4.7-23-2.3-46.6-7.8-69.4 22.8 5.5 46.5 3.2 69.4 7.8a70.3 70.3 0 0 1 37.1 20.3 33 33 0 0 1 6 35.7l-.2.5c-19.3-.5-38.3-5.1-55.7-13.5 4.2-6.8 3.5-16-2.4-21.9-7-6.8-18.2-6.7-25.1.2z"/>
</g>
<g data-color-group="#FDFCFD" data-fillable="true">
<path d="M572.2 402.4c-11.1 0-23.3 5.1-27.3 16.2-3 8.2-1 16.3 3 23.5-5.1-4-11.2-7.7-17.2-11.6a39 39 0 0 1 8.4-34.2c9.1-10 20.4-12.1 33.2-12.1s24.1 2.1 33.2 12.1a39 39 0 0 1 8.4 34.2c-6 3.9-12.1 7.6-17.2 11.6 3.9-7.2 6-15.3 3-23.5-4.2-11.1-16.3-16.2-27.5-16.2z"/>
<path d="M692.2 452.1c-7.9-7.9-20-12.8-30.8-7.9a27.8 27.8 0 0 0-14.5 18.7c-.8-6.4-2.5-13.4-3.9-20.4a38.9 38.9 0 0 1 30.1-18.2c13.5-.7 23 5.9 32 14.9s15.6 18.5 14.9 32c-.6 12.5-8 23.4-18.2 30.1-7-1.5-14-3.1-20.4-3.9 7.9-2.3 15.1-6.6 18.7-14.5 5-10.8 0-22.9-7.9-30.8z"/>
<path d="M452.2 452.1c-7.9 7.9-12.8 20-7.9 30.8a27.8 27.8 0 0 0 18.7 14.5c-6.4.8-13.4 2.5-20.4 3.9a38.9 38.9 0 0 1-18.2-30.1c-.7-13.5 5.9-23 14.9-32s18.5-15.6 32-14.9c12.5.6 23.4 8 30.1 18.2-1.5 7-3.1 14-3.9 20.4-2.3-7.9-6.6-15.1-14.5-18.7-10.8-5-22.9 0-30.8 7.9z"/>
<path d="M563.7 551.7a27 27 0 0 1 17 0c5.2 2.6 9.4 6.8 12 12 .9 2.8 1.4 5.7 1.4 8.5s-.5 5.7-1.4 8.5a26.8 26.8 0 0 1-12 12 27 27 0 0 1-17 0 26.8 26.8 0 0 1-12-12c-.9-2.8-1.4-5.7-1.4-8.5s.5-5.7 1.4-8.5c2.6-5.2 6.8-9.4 12-12zm8.5 5.8a16 16 0 0 0-5.3.9l-.3.1-.3.1a17.1 17.1 0 0 0-7.6 7.6l-.1.3-.1.3a16 16 0 0 0 0 10.6l.1.3.1.3a17.1 17.1 0 0 0 7.6 7.6l.3.1.3.1a16 16 0 0 0 10.6 0l.3-.1.3-.1a17.1 17.1 0 0 0 7.6-7.6l.1-.3.1-.3a16 16 0 0 0 0-10.6l-.1-.3-.1-.3a17.1 17.1 0 0 0-7.6-7.6l-.3-.1-.3-.1a16 16 0 0 0-5.3-.9z"/>
<path d="M572.2 210.7a93.6 93.6 0 0 0-13.1-9.6l-.4-.7c-10.7-12-1-27.1 13.5-27.1s24.2 15.1 13.5 27.1l-.4.7c-4.6 2.8-9 6-13.1 9.6z"/>
<path d="M827.7 316.6a86 86 0 0 0-2.5-16l.2-.8c.9-16 18.4-19.9 28.7-9.6 10.3 10.3 6.5 27.8-9.6 28.7l-.8.2a78.4 78.4 0 0 0-16-2.5z"/>
<path d="M316.7 316.6a86 86 0 0 0-16 2.5l-.8-.2c-16-.9-19.9-18.4-9.6-28.7s27.8-6.5 28.7 9.6l.2.8a78.4 78.4 0 0 0-2.5 16z"/>
<path d="M572.2 168.1c-4.1 0-7.8.9-11 2.5a15 15 0 0 1 11-25.9 15 15 0 0 1 11 25.9 26 26 0 0 0-11-2.5z"/>
<path d="M857.9 286.5c-2.7-2.7-6-4.8-9.6-6a15 15 0 0 1 26.1-10.5 15 15 0 0 1-10.5 26.1 24.8 24.8 0 0 0-6-9.6z"/>
<path d="M286.6 286.5c-2.7 2.7-4.8 6-6 9.6a15 15 0 0 1-10.5-26.1 15 15 0 0 1 26.1 10.5c-3.7 1.2-7 3.2-9.6 6z"/>
<path d="M572.2 139.4a22 22 0 0 0-10.9 2.9 13.4 13.4 0 0 1 10.9-21.5 13.3 13.3 0 0 1 10.9 21.5 22 22 0 0 0-10.9-2.9z"/>
<path d="M878.1 266.2a21.2 21.2 0 0 0-9.8-5.7 13.3 13.3 0 0 1 22.9-7.5 13.3 13.3 0 0 1-7.5 22.9c-.8-3.4-2.6-6.8-5.6-9.7z"/>
<path d="M266.3 266.2a21.2 21.2 0 0 0-5.7 9.8 13.3 13.3 0 0 1-7.5-22.9 13.3 13.3 0 0 1 22.9 7.5c-3.4.8-6.8 2.6-9.7 5.6z"/>
<path d="m572.2 298.5-1.3-.1c-13.2-1.3-12.7-22.2 1.3-22.1 14-.1 14.5 20.8 1.3 22.1l-1.3.1z"/>
<path d="m765.7 378.6-.9-1c-8.4-10.3 6.7-24.6 16.5-14.7 10 9.8-4.4 25-14.7 16.5-.3-.1-.6-.4-.9-.8z"/>
<path d="m378.7 378.6-1 .9c-10.3 8.4-24.6-6.7-14.7-16.5 9.8-10 25 4.4 16.5 14.7-.1.3-.4.6-.8.9z"/>
<path d="M572.2 68c-14.6 0-14.5-22.3 0-22.1 14.5-.2 14.6 22.1 0 22.1z"/>
<path d="M928.7 215.6c-10.3-10.3 5.5-26 15.7-15.7 10.2 10.2-5.4 26-15.7 15.7z"/>
<path d="M215.7 215.6c-10.3 10.3-26-5.5-15.7-15.7 10.2-10.2 26 5.4 15.7 15.7z"/>
<path d="M472 330.1c18.2 14.1 38.9 23 61.3 27.9l-.4.4c-4.3 4.8-8.6 9.5-12.8 14.4a130.5 130.5 0 0 1-37.8-20.8c-.5-.4-1-.4-1.4-.3-.4.2-.8.6-.8 1.2a133.7 133.7 0 0 1-12 41.5c-6.4-.5-12.8-.8-19.2-1.1h-.5a153.1 153.1 0 0 0 23.6-63.2z"/>
<path d="M672.4 330.1c3.1 22.5 11.1 44 23.6 63h-.5c-6.4.4-12.8.6-19.2 1.1a128.5 128.5 0 0 1-12-41.5c-.1-.6-.4-1-.8-1.2s-1-.1-1.4.3c-11.4 9-24.2 16.1-37.9 20.8-4.1-4.9-8.5-9.6-12.8-14.4l-.3-.4a147.9 147.9 0 0 0 61.3-27.7z"/>
<path d="M461.6 305c15.6 12.1 33 20.9 51.8 26.8 2.9 9.7 9 18.1 18.6 23.2-21.9-5-42.4-14-60.1-28.2-.5-.4-1-.4-1.4-.3-.4.2-.8.6-.8 1.2a149 149 0 0 1-22.5 62.5c3-9.9 1.8-20.6-3.2-29.6a168 168 0 0 0 17.6-55.6z"/>
<path d="M682.9 305a163 163 0 0 0 17.7 55.6c-5 9-6.2 19.7-3.2 29.6-12-19-20.1-39.9-22.5-62.5-.1-.6-.4-1-.8-1.2-.4-.2-1-.1-1.4.3a146.6 146.6 0 0 1-60.1 28.2 39 39 0 0 0 18.7-23.2 164.9 164.9 0 0 0 51.6-26.8z"/>
<path d="M443.3 260.8a177.2 177.2 0 0 0 72.4 31.8h.1l-1 2.5a67 67 0 0 0-3 12.5 170.3 170.3 0 0 1-60.7-31.2c-.5-.4-1-.4-1.4-.3-.4.2-.8.6-.8 1.2a174 174 0 0 1-20.9 65 65.1 65.1 0 0 0-11-6.8l-2.5-1.1.1-.1c15.1-22.1 24.6-47 28.7-73.5z"/>
<path d="M701.2 260.8a177.4 177.4 0 0 0 28.7 73.7l.1.1-2.5 1.1a65.1 65.1 0 0 0-11 6.8 174 174 0 0 1-20.9-65c-.1-.6-.4-1-.8-1.2-.4-.2-1-.1-1.4.3a177.9 177.9 0 0 1-60.7 31.2c-.6-4.3-1.5-8.5-3-12.5l-1-2.5h.1a181 181 0 0 0 72.4-32z"/>
<path d="M451.2 279.9c18.1 14.1 38.4 24 60.4 30.4l-.3 5.1c-.1 4.5.3 9 1.2 13.3-18.6-6-35.7-14.8-51-27.1-.5-.4-1-.4-1.4-.3-.4.2-.8.6-.8 1.2a158 158 0 0 1-16.9 55.3 52.4 52.4 0 0 0-8.5-10.3l-3.8-3.4c11-19.9 18.1-41.7 21.1-64.2-.1 0 0 0 0 0z"/>
<path d="M693.3 279.9a178.1 178.1 0 0 0 21.2 64.2 59.5 59.5 0 0 0-12.3 13.7 158 158 0 0 1-16.9-55.3c-.1-.6-.4-1-.8-1.2-.4-.2-1-.1-1.4.3a157.7 157.7 0 0 1-51 27.1c1.5-6 1.8-12.3.9-18.4a177.7 177.7 0 0 0 60.3-30.4z"/>
<path d="M482.4 355.2c11 8.5 23 14.9 36 19.6-3.4 4.1-6.6 8.4-9.4 13-5.7-3.1-11.2-6.7-16.3-10.8-.5-.4-1-.4-1.4-.3-.4.2-.8.6-.8 1.2-.7 6.5-2 12.9-3.8 19.2a121 121 0 0 0-15.8-2.6c5.7-12.5 9.7-25.5 11.5-39.3z"/>
<path d="M662 355.2c1.8 13.6 5.7 26.9 11.6 39.3-5.4.5-10.6 1.3-15.8 2.6-1.8-6.3-3.1-12.6-3.8-19.2-.1-.6-.4-1-.8-1.2-.4-.2-1-.1-1.4.3-5.1 4.1-10.5 7.7-16.3 10.8-2.8-4.6-6-8.9-9.4-13 13-4.7 24.9-11.1 35.9-19.6z"/>
<path d="M492.8 380.4c4.7 3.6 9.6 6.9 14.8 9.8-2.3 4-4.2 8.2-5.6 12.6a66.2 66.2 0 0 0-12.8-4.9c1.6-5.7 2.8-11.6 3.6-17.5z"/>
<path d="M651.6 380.3c.7 5.9 1.9 11.7 3.6 17.4a66.2 66.2 0 0 0-12.8 4.9 64.5 64.5 0 0 0-5.6-12.6c5.2-2.7 10.1-6 14.8-9.7z"/>
</g>
<g data-color-group="#F8AF3F" data-fillable="true">
<path d="M572.2 98.6c-4 0-7.9.3-11.8.9 2.2-4.1 2.2-8.9.4-13.7-4.8-12.8-18.5-21-15-34.2 10-11.4 18.7-23.7 26.4-36.8 7.6 13 16.5 25.4 26.4 36.8 3.5 13.3-10.1 21.4-15 34.2-1.8 4.8-1.8 9.6.4 13.7-3.9-.6-7.8-.9-11.8-.9zm0-58.1c-9-.1-16.5 7.4-16.5 16.3a16.5 16.5 0 0 0 33 0c.1-8.9-7.5-16.3-16.5-16.3z"/>
<path d="M907 237.3a73.2 73.2 0 0 0-9-7.7 16 16 0 0 0 9.9-9.4c5.6-12.5 1.8-27.9 13.6-34.8 15.1-1 30-3.6 44.7-7.4a249.8 249.8 0 0 0-7.4 44.7c-6.9 11.9-22.3 8-34.8 13.6a16 16 0 0 0-9.4 9.9 71.5 71.5 0 0 0-7.6-8.9zm41.1-41.1a16.5 16.5 0 0 0-23.3-.1 16.6 16.6 0 0 0 .1 23.3 16.6 16.6 0 0 0 23.3.1c6.4-6.4 6.3-17-.1-23.3z"/>
<path d="M237.4 237.3a73.2 73.2 0 0 0-7.7 9 16 16 0 0 0-9.4-9.9c-12.5-5.6-27.9-1.8-34.8-13.6-1-15.1-3.6-30-7.4-44.7 14.7 3.8 29.6 6.3 44.7 7.4 11.9 6.9 8 22.3 13.6 34.8a16 16 0 0 0 9.9 9.4 64.9 64.9 0 0 0-8.9 7.6zm-41.1-41.1a16.5 16.5 0 0 0-.1 23.3 16.6 16.6 0 0 0 23.3-.1c6.3-6.3 6.5-16.9.1-23.3-6.4-6.4-17-6.2-23.3.1z"/>
<path d="M568.6 563.4c2.3-.8 4.9-.8 7.2 0 2.2 1.2 4 3 5.2 5.2.8 2.3.8 4.9 0 7.2a13 13 0 0 1-5.2 5.2c-2.3.8-4.9.8-7.2 0a13 13 0 0 1-5.2-5.2c-.8-2.3-.8-4.9 0-7.2 1.2-2.2 3-4 5.2-5.2z"/>
<path d="M530.1 67.8c.9 12.3 19 26.8 11.4 36.8a72 72 0 0 0-10.7 5.5c1-3.5 1.3-7.2.6-11.1-1-5.8-10.6-17.8-8.1-24.8l6.8-6.4z"/>
<path d="M185.9 245.3c9.4 8.1 32.4 5.6 34 18a75.5 75.5 0 0 0-3.6 11.4c-1.8-3.2-4.2-6-7.4-8.3-4.8-3.3-20.1-5.1-23.3-11.9l.3-9.2z"/>
<path d="M899 185.8c-8.1 9.4-5.6 32.4-18 34a75.5 75.5 0 0 0-11.4-3.6c3.2-1.8 6-4.2 8.3-7.4 3.3-4.8 5.1-20.1 11.9-23.3l9.2.3z"/>
<path d="M614.3 67.8c-.9 12.3-19 26.8-11.4 36.8a72 72 0 0 1 10.7 5.5c-1-3.5-1.3-7.2-.6-11.1 1-5.8 10.6-17.8 8.1-24.8l-6.8-6.4z"/>
<path d="M245.4 185.8c8.1 9.4 5.6 32.4 18 34 3.7-1.5 7.5-2.8 11.4-3.6-3.2-1.8-6-4.2-8.3-7.4-3.3-4.8-5.1-20.1-11.9-23.3l-9.2.3z"/>
<path d="M958.5 245.3c-9.4 8.1-32.4 5.6-34 18 1.5 3.7 2.8 7.5 3.6 11.4 1.8-3.2 4.2-6 7.4-8.3 4.8-3.3 20.1-5.1 23.3-11.9l-.3-9.2z"/>
<path d="M508.1 88.7c-.1 10.9 12.7 21.7 9.2 32.6-1.5 1.6-3 3.3-4.4 5.2-.4-1.9-1.2-3.8-2.3-5.4-1.5-2.4-3.7-4-5.7-6-5-4.7-7.8-10.1-6.1-16.3a104 104 0 0 1 7.1-7.8l2.2-2.3z"/>
<path d="M185.1 275.6c7.6 7.7 24.3 6.4 29.6 16.6.1 2.2.3 4.5.6 6.7-1.6-1-3.4-1.8-5.5-2.2-2.8-.6-5.5-.2-8.3-.2-6.9.2-12.7-1.7-15.8-7.2l-.6-10.5v-3.2z"/>
<path d="M868.7 185c-7.7 7.6-6.4 24.3-16.6 29.6-2.2.1-4.5.3-6.7.6 1-1.6 1.8-3.4 2.2-5.5.6-2.8.2-5.5.2-8.3-.2-6.9 1.7-12.7 7.2-15.8 4.6-.4 9.1-.6 13.7-.6z"/>
<path d="M636.3 88.7c.1 10.9-12.7 21.7-9.2 32.6 1.5 1.6 3 3.3 4.4 5.2.4-1.9 1.2-3.8 2.3-5.4 1.5-2.4 3.7-4 5.7-6 5-4.7 7.8-10.1 6.1-16.3-2.2-2.7-4.6-5.3-7-7.8l-2.3-2.3z"/>
<path d="M275.7 185c7.7 7.6 6.4 24.3 16.6 29.6 2.2.1 4.5.3 6.7.6-1-1.6-1.8-3.4-2.2-5.5-.6-2.8-.2-5.5-.2-8.3.2-6.9-1.7-12.7-7.2-15.8l-10.5-.6h-3.2z"/>
<path d="M959.3 275.6c-7.6 7.7-24.3 6.4-29.6 16.6-.1 2.2-.3 4.5-.6 6.7 1.6-1 3.4-1.8 5.5-2.2 2.8-.6 5.5-.2 8.3-.2 6.9.2 12.7-1.7 15.8-7.2l.6-10.5v-3.2z"/>
<path d="M505.1 173.5c.7 3.4 1.6 6.8 2.6 10.2-7.1-3.6-16.5-3.4-22.2-8.4a66.6 66.6 0 0 1-4.2-13.8c.9.8 1.8 1.5 2.8 2.1 3.4 1.9 7.2 2.1 10.8 3.2 4.4 1.3 7.7 3.5 10.2 6.7z"/>
<path d="M242.9 337.7c2.9 1.9 6 3.7 9.1 5.4-7.5 2.5-14.1 9.3-21.7 9.7a77.5 77.5 0 0 1-12.7-6.8c1.2 0 2.4-.2 3.5-.5 3.8-1 6.6-3.6 9.9-5.4 3.9-2.1 7.9-2.9 11.9-2.4z"/>
<path d="M806.6 242.8c-1.9 2.9-3.7 6-5.4 9.1-2.5-7.5-9.3-14.1-9.7-21.7 1.9-4.4 4.1-8.7 6.8-12.7 0 1.2.2 2.3.5 3.5 1 3.8 3.6 6.6 5.4 9.9 2.1 3.9 2.9 7.9 2.4 11.9z"/>
<path d="M639.3 173.5c-.7 3.4-1.6 6.8-2.6 10.2 7.1-3.6 16.5-3.4 22.2-8.4 1.9-4.6 3.3-9.2 4.2-13.8-.8.8-1.8 1.5-2.8 2.1-3.4 1.9-7.2 2.1-10.8 3.2-4 1.1-7.6 3.4-10.2 6.7z"/>
<path d="M337.8 242.8c1.9 2.9 3.7 6 5.4 9.1 2.5-7.5 9.3-14.1 9.7-21.7a77.5 77.5 0 0 0-6.8-12.7c0 1.2-.2 2.4-.5 3.5-1 3.8-3.6 6.6-5.4 9.9-2 3.6-2.9 7.8-2.4 11.9z"/>
<path d="M901.5 337.7c-2.9 1.9-6 3.7-9.1 5.4 7.5 2.5 14.1 9.3 21.7 9.7 4.4-1.9 8.7-4.1 12.7-6.8-1.2 0-2.4-.2-3.5-.5-3.8-1-6.6-3.6-9.9-5.4-3.6-2-7.8-2.9-11.9-2.4z"/>
<path d="M504.5 144c-.9 3.5-1.3 7.1-1.4 10.7-1.8-1.8-4-3.3-6.2-4.7-7-4.2-17.6-8.9-14.9-19v-.2c.5-2.4 1.2-4.8 2-7.2l1.9-4.6c.2 2.7.9 5.4 2.3 8 3.2 6.5 12.1 10.9 16.3 17z"/>
<path d="M221.6 317.3c1.9 3.1 4.1 5.9 6.5 8.5-2.6.1-5.2.4-7.7 1.1-7.9 2-18.8 6.2-24-2.9l-.1-.1-3.7-6.5-1.9-4.5c2 1.7 4.5 3.1 7.3 4 7 2.2 16.3-.9 23.6.4z"/>
<path d="M827 221.5c-3 1.9-5.9 4.1-8.5 6.5-.1-2.6-.4-5.2-1.1-7.7-2-7.9-6.2-18.8 2.9-24l.1-.1 6.5-3.7 4.5-1.9c-1.7 2-3.1 4.5-4 7.3-2.2 7 1 16.3-.4 23.6z"/>
<path d="M639.9 144a55 55 0 0 1 1.4 10.7c1.8-1.8 4-3.3 6.2-4.7 7-4.2 17.6-8.9 14.9-19v-.2c-.6-2.4-1.2-4.8-2-7.2l-1.9-4.6c-.2 2.7-1 5.4-2.3 8-3.2 6.5-12 10.9-16.3 17z"/>
<path d="M317.4 221.5c3.1 1.9 5.9 4.1 8.5 6.5 0-2.6.5-5.1 1.1-7.7 2-7.9 6.2-18.8-2.9-24l-.1-.1-6.5-3.7-4.5-1.9c1.7 2 3.1 4.5 4 7.3 2.2 7-.9 16.3.4 23.6z"/>
<path d="M922.8 317.3c-1.9 3-4.1 5.9-6.5 8.5 2.6 0 5.1.5 7.7 1.1 7.9 2 18.8 6.2 24-2.9l.1-.1 3.7-6.5 1.9-4.5c-2 1.7-4.5 3.1-7.3 4-6.9 2.2-16.3-.9-23.6.4z"/>
</g>
</g>
<g class="myIdInfo" id="myIdInfo" text-anchor="middle"/>
</svg>
helpers:
getPosOnCircle() – get arc coordinates (based upon Paul LeBeau's answer
– Pure svg pie chart, text align center ) – also helpful for pie chart labelling
checkPointIntersection() – for singular x/y intersection checking
checkCircleIntersects() – checking points at several angles and radii. Returns an array of intersecting points
getBestMatchArr() – find best match by comparing intersection arrays' length
svg optimizations:
reduce unnecessary background elements
inherit properties by parent groups
You can reduce the svg data significantly by removing inner/counter shapes from the background layers (~ from 400KB to 150 KB(incliuding labels) – still not lightweight).
However, as #the Hutt already pointed out:
You should rather cache or store the retrieved label coordinates statically to avoid expensive isPointInFill() calculations every time you load your site/view.
codepen example

Creating text out of SVG <path>'s [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm wondering if theres any tools to create text out of SVG <path> elements. I found this codepen I really like and would like to be able to use it with my own text.
Sorry if this is a stupid question but I tried looking on google and couldn't find anything
https://codepen.io/robin-dela/pen/KKPYoBq

Yes, you can there are a lot of tools to help you in that by entering the text and it will convert it to SVG path for example Google font to SVG path tool.
every time you want to change the text just use Google font to SVG path to generate your word SVG path and put it into your code.
here is an example based on your Codepen:
var vertex = `
attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 0, 1);
}
`;
var fragment = `
precision highp float;
precision highp int;
uniform sampler2D tWater;
uniform sampler2D tFlow;
uniform float uTime;
varying vec2 vUv;
uniform vec4 res;
uniform vec2 img;
vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
return uvs * factor - factor /2. + 0.5;
}
void main() {
// R and G values are velocity in the x and y direction
// B value is the velocity length
vec3 flow = texture2D(tFlow, vUv).rgb;
vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
// vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV -= flow.xy * (0.15 * 1.2);
vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV2 -= flow.xy * (0.125 * 1.2);
vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV3 -= flow.xy * (0.10 * 1.4);
vec3 tex = texture2D(tWater, myUV).rgb;
vec3 tex2 = texture2D(tWater, myUV2).rgb;
vec3 tex3 = texture2D(tWater, myUV3).rgb;
gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
}
`;
{
var _size = [2048, 1638];
var renderer = new ogl.Renderer({ dpr: 2 });
var gl = renderer.gl;
document.body.appendChild(gl.canvas);
// Variable inputs to control flowmap
var aspect = 1;
var mouse = new ogl.Vec2(-1);
var velocity = new ogl.Vec2();
function resize() {
gl.canvas.width = window.innerWidth * 2.0;
gl.canvas.height = window.innerHeight * 2.0;
gl.canvas.style.width = window.innerWidth + "px";
gl.canvas.style.height = window.innerHeight + "px";
var a1, a2;
var imageAspect = _size[1] / _size[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = window.innerWidth / window.innerHeight * imageAspect;
a2 = 1;
}
mesh.program.uniforms.res.value = new ogl.Vec4(
window.innerWidth,
window.innerHeight,
a1,
a2);
renderer.setSize(window.innerWidth, window.innerHeight);
aspect = window.innerWidth / window.innerHeight;
}
var flowmap = new ogl.Flowmap(gl, {
falloff: 0.3,
dissipation: 0.92,
alpha: 0.5 });
// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
var geometry = new ogl.Geometry(gl, {
position: {
size: 2,
data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) } });
var texture = new ogl.Texture(gl, {
minFilter: gl.LINEAR,
magFilter: gl.LINEAR });
var img = new Image();
img.onload = () => texture.image = img;
img.crossOrigin = "Anonymous";
img.src = "https://robindelaporte.fr/codepen/bg3.jpg";
var a1, a2;
var imageAspect = _size[1] / _size[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = window.innerWidth / window.innerHeight * imageAspect;
a2 = 1;
}
var program = new ogl.Program(gl, {
vertex,
fragment,
uniforms: {
uTime: { value: 0 },
tWater: { value: texture },
res: {
value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2) },
img: { value: new ogl.Vec2(_size[1], _size[0]) },
// Note that the uniform is applied without using an object and value property
// This is because the class alternates this texture between two render targets
// and updates the value property after each render.
tFlow: flowmap.uniform } });
var mesh = new ogl.Mesh(gl, { geometry, program });
window.addEventListener("resize", resize, false);
resize();
// Create handlers to get mouse position and velocity
var isTouchCapable = ("ontouchstart" in window);
if (isTouchCapable) {
window.addEventListener("touchstart", updateMouse, false);
window.addEventListener("touchmove", updateMouse, { passive: false });
} else {
window.addEventListener("mousemove", updateMouse, false);
}
var lastTime;
var lastMouse = new ogl.Vec2();
function updateMouse(e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches.length) {
e.x = e.changedTouches[0].pageX;
e.y = e.changedTouches[0].pageY;
}
if (e.x === undefined) {
e.x = e.pageX;
e.y = e.pageY;
}
// Get mouse value in 0 to 1 range, with y flipped
mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
// Calculate velocity
if (!lastTime) {
// First frame
lastTime = performance.now();
lastMouse.set(e.x, e.y);
}
var deltaX = e.x - lastMouse.x;
var deltaY = e.y - lastMouse.y;
lastMouse.set(e.x, e.y);
var time = performance.now();
// Avoid dividing by 0
var delta = Math.max(10.4, time - lastTime);
lastTime = time;
velocity.x = deltaX / delta;
velocity.y = deltaY / delta;
// Flag update to prevent hanging velocity values when not moving
velocity.needsUpdate = true;
}
requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);
// Reset velocity when mouse not moving
if (!velocity.needsUpdate) {
mouse.set(-1);
velocity.set(0);
}
velocity.needsUpdate = false;
// Update flowmap inputs
flowmap.aspect = aspect;
flowmap.mouse.copy(mouse);
// Ease velocity input, slower when fading out
flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
flowmap.update();
program.uniforms.uTime.value = t * 0.01;
renderer.render({ scene: mesh });
}
}
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* display: none; */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://robindelaporte.fr/codepen/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="mask">
<svg id="Layer_1" width="500.25" height="300.401" viewBox="0 0 124.25 35.401" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="" ><path class="st0" d="M 0.287 14.019 A 28.282 28.282 0 0 0 0 18.15 A 32.323 32.323 0 0 0 0.167 21.511 Q 0.796 27.521 3.8 31 Q 7.6 35.4 14.525 35.4 Q 21.45 35.4 25.875 30.575 Q 30.3 25.75 30.3 16.75 Q 30.3 12.5 29.225 9.3 Q 28.579 7.375 27.769 5.984 A 10.057 10.057 0 0 0 26.625 4.375 Q 25.1 2.65 22.95 1.625 A 22.239 22.239 0 0 0 22.015 1.205 Q 21.254 0.884 20.556 0.663 A 11.47 11.47 0 0 0 19.1 0.3 Q 17.4 0 15.55 0 A 14.963 14.963 0 0 0 10.221 0.967 A 17.387 17.387 0 0 0 5.45 3.75 A 10.119 10.119 0 0 0 4.91 4.213 Q 3.765 5.263 2.846 6.738 A 17.31 17.31 0 0 0 1.5 9.425 A 17.43 17.43 0 0 0 1.384 9.722 Q 0.631 11.696 0.287 14.019 Z M 15.1 30.7 Q 24.05 30.7 24.05 17.55 A 28.133 28.133 0 0 0 23.703 12.915 Q 22.273 4.4 14.95 4.4 A 9.734 9.734 0 0 0 12.536 4.685 A 7.198 7.198 0 0 0 9.675 6.125 Q 7.6 7.85 6.8 10.425 Q 6 13 6 16.4 A 33.631 33.631 0 0 0 6.32 21.26 Q 7.706 30.7 15.1 30.7 Z" id="0" vector-effect="non-scaling-stroke"/><path class="st0" d="M 33.7 13.4 L 33.7 10.8 A 1.08 1.08 0 0 1 33.737 10.503 Q 33.833 10.17 34.172 10.082 A 1.105 1.105 0 0 1 34.45 10.05 L 41.3 10.05 A 0.819 0.819 0 0 1 41.618 10.108 Q 41.978 10.258 42.05 10.8 L 42.45 13.7 A 8.722 8.722 0 0 1 45.429 10.703 Q 47.085 9.726 49.233 9.542 A 11.966 11.966 0 0 1 50.25 9.5 A 9.347 9.347 0 0 1 52.894 9.848 Q 55.914 10.738 57.1 13.9 A 9.588 9.588 0 0 1 59.583 11.134 Q 61.533 9.704 64.18 9.526 A 11.433 11.433 0 0 1 64.95 9.5 A 10.083 10.083 0 0 1 68.146 9.963 Q 72.659 11.47 72.7 17.882 A 18.445 18.445 0 0 1 72.7 18 L 72.7 30.85 L 75.55 30.85 A 1.08 1.08 0 0 1 75.847 30.887 Q 76.18 30.983 76.268 31.322 A 1.105 1.105 0 0 1 76.3 31.6 L 76.3 34.05 A 1.08 1.08 0 0 1 76.263 34.347 Q 76.168 34.68 75.828 34.768 A 1.105 1.105 0 0 1 75.55 34.8 L 64.55 34.8 A 1.08 1.08 0 0 1 64.253 34.763 Q 63.921 34.668 63.832 34.328 A 1.105 1.105 0 0 1 63.8 34.05 L 63.8 31.6 A 1.08 1.08 0 0 1 63.837 31.303 Q 63.933 30.97 64.272 30.882 A 1.105 1.105 0 0 1 64.55 30.85 L 67.1 30.85 L 67.1 20.5 A 19.73 19.73 0 0 0 67.04 18.905 Q 66.916 17.374 66.531 16.396 A 4.228 4.228 0 0 0 66.3 15.9 A 2.552 2.552 0 0 0 64.913 14.738 Q 64.155 14.45 63.075 14.45 A 7.356 7.356 0 0 0 61.458 14.618 Q 60.129 14.917 59.2 15.75 A 4.704 4.704 0 0 0 58.275 16.857 A 3.756 3.756 0 0 0 57.75 18.8 L 57.75 30.85 L 60.15 30.85 A 1.08 1.08 0 0 1 60.447 30.887 Q 60.78 30.983 60.868 31.322 A 1.105 1.105 0 0 1 60.9 31.6 L 60.9 34.05 A 1.08 1.08 0 0 1 60.863 34.347 Q 60.768 34.68 60.428 34.768 A 1.105 1.105 0 0 1 60.15 34.8 L 49.9 34.8 A 1.08 1.08 0 0 1 49.603 34.763 Q 49.271 34.668 49.182 34.328 A 1.105 1.105 0 0 1 49.15 34.05 L 49.15 31.6 A 1.08 1.08 0 0 1 49.187 31.303 Q 49.283 30.97 49.622 30.882 A 1.105 1.105 0 0 1 49.9 30.85 L 52.15 30.85 L 52.15 20.5 A 19.73 19.73 0 0 0 52.09 18.905 Q 51.966 17.374 51.581 16.396 A 4.228 4.228 0 0 0 51.35 15.9 A 2.534 2.534 0 0 0 50.001 14.758 Q 49.535 14.575 48.943 14.501 A 6.978 6.978 0 0 0 48.075 14.45 A 6.698 6.698 0 0 0 46.432 14.641 A 4.652 4.652 0 0 0 44.175 15.925 A 5.128 5.128 0 0 0 43.106 17.519 A 4.719 4.719 0 0 0 42.75 19.35 L 42.75 30.85 L 45.8 30.85 A 1.08 1.08 0 0 1 46.097 30.887 Q 46.43 30.983 46.518 31.322 A 1.105 1.105 0 0 1 46.55 31.6 L 46.55 34.05 A 1.08 1.08 0 0 1 46.513 34.347 Q 46.418 34.68 46.078 34.768 A 1.105 1.105 0 0 1 45.8 34.8 L 34.5 34.8 A 1.08 1.08 0 0 1 34.203 34.763 Q 33.871 34.668 33.782 34.328 A 1.105 1.105 0 0 1 33.75 34.05 L 33.75 31.6 A 1.08 1.08 0 0 1 33.787 31.303 Q 33.883 30.97 34.222 30.882 A 1.105 1.105 0 0 1 34.5 30.85 L 37.15 30.85 L 37.15 14.15 L 34.45 14.15 A 1.08 1.08 0 0 1 34.153 14.113 Q 33.821 14.018 33.732 13.678 A 1.105 1.105 0 0 1 33.7 13.4 Z" id="1" vector-effect="non-scaling-stroke"/><path class="st0" d="M 93.5 19.95 L 93.5 18.2 A 9.647 9.647 0 0 0 93.39 16.682 Q 93.268 15.915 93.008 15.33 A 2.968 2.968 0 0 0 91.5 13.75 A 4.051 4.051 0 0 0 90.823 13.539 Q 90.105 13.377 89.09 13.354 A 15.117 15.117 0 0 0 88.75 13.35 A 5.387 5.387 0 0 0 87.177 13.563 Q 85.452 14.089 84.826 15.917 A 5.734 5.734 0 0 0 84.65 16.55 A 1.491 1.491 0 0 1 84.559 16.851 Q 84.37 17.287 83.927 17.3 A 0.936 0.936 0 0 1 83.9 17.3 L 80.7 17.3 Q 79.9 17.3 80 16.55 A 7.966 7.966 0 0 1 80.439 14.271 A 5.867 5.867 0 0 1 82.95 11.2 A 10.731 10.731 0 0 1 86.13 9.912 Q 87.507 9.584 89.115 9.517 A 20.158 20.158 0 0 1 89.95 9.5 A 14.16 14.16 0 0 1 93.383 9.879 Q 97.836 10.995 98.695 15.405 A 12.019 12.019 0 0 1 98.9 17.7 L 98.9 30.85 L 101.05 30.85 A 1.08 1.08 0 0 1 101.347 30.887 Q 101.68 30.983 101.768 31.322 A 1.105 1.105 0 0 1 101.8 31.6 L 101.8 34.05 A 1.08 1.08 0 0 1 101.763 34.347 Q 101.668 34.68 101.328 34.768 A 1.105 1.105 0 0 1 101.05 34.8 L 95.15 34.8 A 0.819 0.819 0 0 1 94.832 34.742 Q 94.472 34.592 94.4 34.05 L 94.05 31.75 A 8.78 8.78 0 0 1 87.642 35.327 A 12.938 12.938 0 0 1 86.25 35.4 A 10.061 10.061 0 0 1 83.832 35.124 A 7.408 7.408 0 0 1 80.95 33.725 A 5.2 5.2 0 0 1 79.256 31.211 Q 78.964 30.324 78.882 29.235 A 11.781 11.781 0 0 1 78.85 28.35 Q 78.85 23.553 82.812 21.74 A 8.786 8.786 0 0 1 82.9 21.7 A 17.364 17.364 0 0 1 86.701 20.474 Q 88.465 20.11 90.481 20.017 A 29.489 29.489 0 0 1 90.9 20 Q 91.628 20 92.765 19.971 A 162.373 162.373 0 0 0 93.5 19.95 Z M 93.6 27.25 L 93.6 23.4 A 81.655 81.655 0 0 0 91.93 23.416 Q 88.594 23.484 87.7 23.85 A 25.7 25.7 0 0 0 86.663 24.3 A 18.714 18.714 0 0 0 85.75 24.75 Q 84.15 25.6 84.15 27.85 A 4.287 4.287 0 0 0 84.374 29.298 Q 85.054 31.195 87.791 31.295 A 8.517 8.517 0 0 0 88.1 31.3 A 8.903 8.903 0 0 0 89.683 31.168 Q 90.569 31.008 91.273 30.653 A 4.486 4.486 0 0 0 92.15 30.075 A 4.729 4.729 0 0 0 92.976 29.189 A 3.301 3.301 0 0 0 93.6 27.25 Z" id="2" vector-effect="non-scaling-stroke"/><path class="st0" d="M 124.25 10.8 L 124.25 17.55 A 1.08 1.08 0 0 1 124.213 17.847 Q 124.118 18.18 123.778 18.268 A 1.105 1.105 0 0 1 123.5 18.3 L 120.25 18.3 A 1.082 1.082 0 0 1 119.976 18.269 Q 119.52 18.149 119.549 17.573 A 1.474 1.474 0 0 1 119.55 17.55 L 119.75 14.65 Q 119.502 14.6 118.91 14.6 A 13.297 13.297 0 0 0 118.9 14.6 A 4.593 4.593 0 0 0 115.438 16.087 A 6.025 6.025 0 0 0 115.1 16.475 A 6.486 6.486 0 0 0 113.914 18.887 Q 113.661 19.831 113.612 20.948 A 12.535 12.535 0 0 0 113.6 21.5 L 113.6 30.85 L 119.1 30.85 A 1.08 1.08 0 0 1 119.397 30.887 Q 119.73 30.983 119.818 31.322 A 1.105 1.105 0 0 1 119.85 31.6 L 119.85 34.05 A 1.08 1.08 0 0 1 119.813 34.347 Q 119.718 34.68 119.378 34.768 A 1.105 1.105 0 0 1 119.1 34.8 L 105.35 34.8 A 1.08 1.08 0 0 1 105.053 34.763 Q 104.721 34.668 104.632 34.328 A 1.105 1.105 0 0 1 104.6 34.05 L 104.6 31.6 A 1.08 1.08 0 0 1 104.637 31.303 Q 104.733 30.97 105.072 30.882 A 1.105 1.105 0 0 1 105.35 30.85 L 108 30.85 L 108 14.15 L 105.3 14.15 A 1.08 1.08 0 0 1 105.003 14.113 Q 104.671 14.018 104.582 13.678 A 1.105 1.105 0 0 1 104.55 13.4 L 104.55 10.8 A 1.08 1.08 0 0 1 104.587 10.503 Q 104.683 10.17 105.022 10.082 A 1.105 1.105 0 0 1 105.3 10.05 L 111.9 10.05 A 0.966 0.966 0 0 1 112.25 10.109 Q 112.642 10.261 112.75 10.8 L 113.3 14.35 A 8.128 8.128 0 0 1 115.482 11.384 A 9.875 9.875 0 0 1 116.05 10.925 Q 117.95 9.5 120.2 9.5 A 20.41 20.41 0 0 1 121.444 9.535 Q 122.636 9.608 123.432 9.833 A 4.92 4.92 0 0 1 123.65 9.9 Q 124.123 10.058 124.223 10.525 A 1.309 1.309 0 0 1 124.25 10.8 Z" id="3" vector-effect="non-scaling-stroke"/></g> <style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
</svg>
</div>

I think you need to write text in Svg Like this if you don't want to use path.
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text
</svg>

Update svg style after php bdd request

I am trying to do an dynamic map of a building, when a user enter the name of the person and the bdd will give me back his desk number, which is an ID in my svg paths but odk what i am doing wrong,
I am also trying to trigger a js method each time a user press a desk on the map it'll return all information about the person using the desk.
here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="app.css">
</head>
<body>
<form action = "validate.php" method = "post">
<input type = "search" name = "nom">
<button type= "submit" id='valider'>Recherche</button>
</form>
<div class="map" id="map">
<div class="map__image">
<svg version="1.0" class="tempo" xmlns="http://www.w3.org/2000/svg"
width="1528.000000pt" height="502.000000pt" viewBox="0 0 1528.000000
502.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,502.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M130 2710 l0 -2220 5935 0 5935 0 1477 1001 c813 551 1532 1039 1599 1084 l120 81 -990 344 c-1258 436 -1538 533 -3231 1122 l-1390 483 -240 5 -240 5 -390 158 -389 157 -4098 0 -4098 0 0 -2220z m8575 2050 l370 -149 -725 -1 c-399 0 -2090 5 -3758 11 -1668 6 -3034 10 -3036 8 -3 -3 -13 -575 -16 -851 l0 -48 -700 0 -699 0 -1 590 0 590 4097 0 4098 -1 370 -149z m-6729 -150 l123 0 3 -52 3 -53 38 -3 37 -3 0 -290 c0 -186 4 -289 10 -289 6 0 10 107 10 300 l0 300 -40 0 c-34 0 -41 4 -46 24 -3 14 -4 33 -2 43 3 17 21 18 286 21 l282 2 0 -450 0 -450 158 2 157 2 -147 3 -148 4 0 444 0 445 265 0 265 0 0 -535 0 -535 135 0 c83 0 135 4 135 10 0 6 -48 10 -125 10 l-125 0 0 525 0 525 245 0 245 0 0 -520 0 -520 283 2 282 3 -277 2 -277 3 0 503 c-1 276 3 508 7 515 7 9 86 12 363 10 l354 -3 5 -530 c3 -291 7 -528 10 -525 2 3 6 241 9 530 l6 525 63 0 c34 -1 627 -2 1317 -3 l1255 -2 0 -530 0 -530 170 0 c107 0 170 4 170 10 0 6 -60 10 -160 10 l-160 0 0 320 0 320 160 0 160 0 0 85 0 85 -160 0 -160 0 0 115 0 115 93 0 c50 0 163 -3 250 -7 l157 -6 0 -519 c0 -339 3 -518 10 -518 7 0 10 180 10 520 l0 520 525 0 525 0 2 -522 2 -523 7 375 c3 206 7 441 8 523 l1 147 404 0 c342 0 405 -2 409 -14 8 -19 8 -983 0 -1002 -4 -12 -55 -14 -324 -14 -206 0 -319 -4 -319 -10 0 -6 117 -10 330 -10 l330 0 0 520 c0 304 4 520 9 520 11 0 4327 -1496 4341 -1505 6 -4 9 -229 9 -628 l0 -622 -22 -16 c-12 -8 -265 -180 -562 -381 -297 -201 -723 -489 -948 -641 l-407 -277 -565 0 -565 0 0 640 0 640 -165 0 c-103 0 -165 -4 -165 -10 0 -6 58 -10 155 -10 l155 0 0 -420 0 -420 -155 0 -155 0 0 -82 0 -83 155 3 155 3 0 -131 0 -130 -255 0 -255 0 0 642 c0 353 -2 639 -5 636 -3 -3 -7 -291 -8 -639 l-2 -634 -1850 0 -1850 0 -2 270 c-2 149 -3 404 -3 568 l0 297 -167 -2 -168 -2 163 -3 162 -3 0 -350 0 -350 -160 0 -160 0 0 -90 0 -90 160 0 160 0 0 -125 0 -125 -255 0 -255 0 0 640 c0 420 -3 640 -10 640 -7 0 -10 -220 -10 -640 l0 -640 -260 0 -260 0 0 120 0 120 180 0 180 0 0 90 0 90 -180 0 -180 0 0 425 0 425 165 0 c103 0 165 4 165 10 0 6 -63 10 -170 10 l-170 0 0 -645 0 -645 -1050 0 -1050 0 0 645 0 645 -170 0 c-107 0 -170 -4 -170 -10 0 -6 62 -10 165 -10 l165 0 0 -425 0 -425 -170 0 -170 0 0 -85 0 -85 170 0 170 0 0 -125 0 -125 -265 0 -265 0 2 645 3 645 -177 0 c-112 0 -178 -4 -178 -10 0 -6 64 -10 172 -10 l171 0 -6 -292 c-4 -161 -7 -353 -7 -425 l0 -133 -160 0 -160 0 0 -85 0 -85 160 0 160 0 0 -125 0 -125 -250 0 -250 0 0 645 0 645 -165 0 c-103 0 -165 -4 -165 -10 0 -6 58 -10 155 -10 l155 0 0 -635 0 -635 -255 0 -255 0 0 645 0 645 -145 0 c-90 0 -145 -4 -145 -10 0 -6 52 -10 135 -10 l135 0 0 -635 0 -635 -517 2 -518 3 -3 545 c-1 300 0 555 3 568 l5 22 297 0 c163 0 294 2 291 5 -3 3 -284 5 -626 5 l-622 0 -5 23 c-3 12 -4 123 -3 247 l3 225 128 3 127 3 0 257 c0 141 3 490 7 775 l6 517 370 0 369 0 -7 -773 -8 -774 609 -6 c335 -4 700 -7 812 -7 l202 0 0 535 0 535 -185 0 -185 0 0 248 0 249 -277 6 c-153 4 -340 7 -415 7 l-138 0 0 439 c0 342 3 441 13 445 6 3 72 4 146 1 74 -3 189 -5 257 -5z m5463 -256 l31 -6 0 -69 0 -69 -155 0 -155 0 0 75 0 75 124 0 c68 0 138 -3 155 -6z m-7111 -644 l62 0 0 -765 0 -766 -122 3 -123 3 -3 759 c-2 601 0 762 10 768 7 5 36 7 63 4 28 -3 78 -6 113 -6z m2042 -770 l0 -770 -605 0 -605 0 0 770 0 770 605 0 605 0 0 -770z m375 218 c-1 -21 -2 -252 -3 -513 l-2 -475 -182 0 -181 0 6 353 c4 193 7 425 7 515 l0 162 178 -2 177 -3 0 -37z m11828 -303 c317 -110 577 -202 577 -205 0 -6 -1186 -810 -1194 -810 -3 0 -6 276 -6 614 l0 614 23 -6 c13 -4 283 -97 600 -207z m-13783 -1775 l0 -570 -322 2 -323 3 -3 545 c-1 300 0 555 3 568 l5 22 320 0 320 0 0 -570z m5820 -230 l0 -80 -155 0 -155 0 0 80 0 80 155 0 155 0 0 -80z m-3170 -5 l0 -75 -165 0 -165 0 0 75 0 75 165 0 165 0 0 -75z m2468 -2 l3 -73 -176 0 -175 0 0 68 c0 38 3 72 7 76 4 3 81 5 172 4 l166 -3 3 -72z m-3018 -3 l0 -70 -155 0 -155 0 0 70 0 70 155 0 155 0 0 -70z m7960 5 l0 -65 -150 0 -150 0 0 65 0 65 150 0 150 0 0 -65z"/>
<path d="M11310 2561 c0 -5 84 -38 188 -73 l187 -65 3 -137 3 -136 -166 0 c-105 0 -165 -4 -165 -10 0 -7 111 -9 328 -8 l327 3 3 95 3 95 -108 37 c-59 19 -219 74 -355 121 -137 48 -248 82 -248 78z m558 -201 l132 -45 0 -81 c0 -57 -4 -83 -12 -86 -7 -2 -73 -2 -145 0 l-133 4 0 130 c0 101 3 129 13 126 7 -2 72 -23 145 -48z"/>
<path d="M9400 2990 c0 -6 72 -10 195 -10 l195 0 0 -425 0 -425 -400 0 -400 0 0 390 0 390 85 0 c50 0 85 4 85 10 0 6 -36 10 -88 10 l-89 0 -6 -212 c-4 -116 -7 -298 -7 -405 l0 -193 273 0 c151 0 403 -3 560 -7 215 -5 287 -3 287 5 0 9 -42 12 -145 12 l-146 0 1 215 1 215 260 0 c200 0 259 -3 260 -12 1 -7 1 -109 -1 -225 l-2 -213 441 0 c287 0 441 3 441 10 0 7 -150 10 -430 10 l-430 0 0 370 c0 217 4 370 9 370 5 0 177 -58 382 -130 324 -112 398 -135 378 -116 -10 9 -770 268 -774 264 -3 -3 -6 -74 -8 -159 l-2 -154 -255 3 c-140 1 -258 6 -262 10 -4 4 -4 94 -1 200 l6 192 159 0 c99 0 158 4 158 10 0 6 -128 10 -365 10 -237 0 -365 -4 -365 -10z"/>
<path d="M7077 3270 c-93 -16 -171 -31 -175 -34 -10 -11 32 -6 186 19 84 14 159 25 167 25 13 0 15 -27 15 -175 l0 -175 -180 0 -180 0 0 50 0 50 -97 -2 -98 -2 88 -3 87 -4 0 -44 0 -45 -375 0 -375 0 0 -380 0 -380 380 0 380 0 0 -55 0 -54 -87 -4 -88 -3 98 -2 97 -2 0 60 0 60 185 0 185 0 0 -180 0 -180 -22 5 c-38 9 -336 55 -354 55 -49 0 14 -14 197 -45 l203 -34 194 29 c107 16 197 31 200 34 10 10 -40 6 -178 -15 -74 -11 -156 -22 -183 -26 l-47 -6 2 179 3 179 163 3 162 2 0 -65 0 -65 100 0 c60 0 100 4 100 10 0 6 -37 10 -90 10 l-90 0 0 55 0 55 360 -2 360 -3 0 383 0 382 -355 0 -355 0 0 40 0 40 93 2 92 2 -100 5 -100 6 -3 -47 -3 -48 -175 0 -174 0 0 175 c0 160 1 175 18 175 9 0 82 -11 162 -25 80 -14 154 -25 165 -24 l20 0 -20 9 c-26 12 -325 60 -362 59 -15 0 -104 -13 -196 -29z m622 -725 l0 -365 -769 0 -770 0 0 365 0 365 770 0 769 0 0 -365z m651 0 l0 -365 -320 0 -320 0 0 365 0 365 320 0 320 0 0 -365z"/>
<path d="M3100 2680 l0 -530 883 0 882 0 0 530 0 530 -882 0 -883 0 0 -530z m1750 0 l0 -510 -865 0 -865 0 0 510 0 510 865 0 865 0 0 -510z"/>
<path id="1" d="M6550 4223 l0 -322 88 -3 c48 -2 122 -2 165 0 l77 3 0 322 0 322 -165 0 -165 0 0 -322z m170 157 l0 -150 -80 0 -80 0 0 150 0 150 80 0 80 0 0 -150z m149 13 c0 -75 -3 -143 -6 -150 -4 -9 -26 -13 -69 -13 l-64 0 0 150 0 150 70 0 71 0 -2 -137z m-149 -328 l0 -155 -80 0 -80 0 0 155 0 155 80 0 80 0 0 -155z m148 50 c2 -55 1 -124 -3 -152 l-6 -53 -65 0 -64 0 0 155 0 156 68 -3 67 -3 3 -100z"/>
<path id="2" d="M4830 4148 l0 -318 160 0 160 0 0 158 c1 275 -1 466 -5 470 -2 2 -74 4 -159 5 l-156 2 0 -317z m170 152 l0 -150 -75 0 -75 0 0 150 0 150 75 0 75 0 0 -150z m140 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m-140 -310 l0 -150 -75 0 -75 0 0 150 0 150 75 0 75 0 0 -150z m140 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z"/>
<path id="3" d="M5770 4303 l0 -163 165 0 165 0 0 160 0 160 -87 1 c-49 1 -123 2 -165 3 l-78 1 0 -162z m170 2 l0 -145 -80 0 -80 0 0 145 0 145 80 0 80 0 0 -145z m150 0 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z"/>
<path id="4" d="M10079 4266 c-191 -531 -304 -862 -295 -864 13 -5 282 -101 304 -109 9 -4 13 -2 9 4 -9 14 72 255 90 269 8 7 10 14 5 15 -6 2 37 137 94 299 57 162 103 301 104 308 0 6 -6 12 -13 12 -8 0 -75 22 -150 49 l-137 48 -11 -31z m98 -11 l51 -18 -34 -101 c-20 -56 -42 -120 -51 -143 l-15 -41 -56 19 c-31 11 -60 23 -64 27 -5 5 9 57 31 118 58 162 60 166 74 162 6 -3 35 -13 64 -23z m141 -50 c28 -11 52 -24 52 -30 0 -9 -64 -206 -85 -262 -3 -9 -21 -7 -67 9 -35 11 -66 24 -70 27 -4 4 10 56 31 116 57 161 60 167 74 163 6 -3 36 -13 65 -23z m-198 -270 c0 -16 -90 -269 -99 -278 -6 -6 -110 25 -129 39 -2 1 20 67 49 147 l51 144 64 -20 c35 -12 64 -26 64 -32z m96 -25 l62 -22 -45 -126 c-25 -70 -48 -135 -50 -144 -3 -10 -10 -18 -17 -18 -11 0 -118 39 -124 45 -8 8 93 295 103 292 5 -3 38 -14 71 -27z m-258 -255 c28 -11 52 -24 52 -29 0 -27 -86 -256 -97 -256 -6 0 -36 10 -67 21 -49 19 -56 25 -50 43 35 114 89 246 98 243 6 -2 35 -12 64 -22z m207 -75 c3 0 -85 -260 -90 -268 -3 -4 -118 39 -128 47 -6 6 40 156 78 253 6 16 12 15 72 -7 36 -14 67 -25 68 -25z"/>
<path id="5" d="M10776 4031 c-3 -5 -57 -159 -120 -342 -62 -184 -132 -385 -155 -448 -22 -63 -40 -115 -38 -116 17 -13 242 -83 249 -79 6 4 8 2 5 -3 -4 -6 4 -14 17 -17 13 -3 30 -8 38 -11 8 -3 14 1 14 12 0 26 196 587 206 591 4 2 6 7 3 12 -5 8 76 250 95 283 12 20 26 13 -168 81 -150 52 -139 49 -146 37z m44 -22 c-12 -8 -9 -10 12 -6 17 2 25 0 21 -6 -4 -6 2 -8 15 -5 12 4 20 2 16 -3 -3 -5 1 -9 8 -9 39 -1 39 -15 -6 -144 -24 -69 -46 -129 -49 -132 -10 -10 -148 40 -143 52 2 6 24 66 48 133 25 72 49 122 58 125 28 7 35 6 20 -5z m199 -65 l59 -17 -44 -130 c-24 -72 -48 -135 -52 -139 -8 -8 -99 18 -116 33 -8 7 23 105 75 247 10 26 5 26 78 6z m-259 -240 c40 -15 69 -32 67 -38 -2 -6 -21 -63 -42 -126 -21 -63 -41 -118 -44 -123 -9 -9 -146 37 -146 49 0 10 88 264 91 264 2 0 35 -12 74 -26z m152 -48 c9 0 14 -5 11 -10 -4 -5 3 -7 15 -4 12 4 20 2 17 -2 -3 -5 0 -10 7 -12 9 -3 -1 -43 -31 -134 -24 -71 -45 -130 -46 -131 0 -1 -30 7 -66 19 l-65 21 37 106 c59 170 56 163 82 155 12 -4 30 -8 39 -8z m-240 -235 l66 -22 -53 -152 c-53 -151 -53 -152 -83 -152 -17 -1 -29 2 -26 4 3 3 -16 13 -43 22 -26 9 -47 20 -47 25 7 43 101 304 109 301 5 -2 40 -14 77 -26z m156 -56 c31 -10 52 -22 49 -29 -2 -6 -26 -75 -53 -153 -35 -100 -54 -143 -67 -147 -9 -2 -15 0 -12 4 3 5 -19 16 -49 24 l-55 16 50 143 c27 78 52 148 54 156 3 7 11 11 18 8 6 -2 36 -12 65 -22z"/>
<path id="6" d="M11341 3398 c-74 -222 -140 -422 -147 -445 l-13 -42 149 -49 148 -50 147 437 c81 240 149 441 151 446 3 8 -277 107 -296 106 -3 -1 -66 -182 -139 -403z m279 337 c0 -14 -81 -258 -89 -267 -3 -4 -36 3 -72 14 l-66 22 43 130 c24 72 46 136 48 143 6 14 136 -25 136 -42z m137 -40 c2 -1 -19 -64 -45 -141 l-47 -139 -61 20 -62 20 50 142 50 142 57 -21 c31 -11 57 -22 58 -23z m-286 -230 l57 -18 -49 -145 c-27 -80 -50 -146 -52 -148 -3 -3 -126 34 -134 41 -2 1 73 234 92 284 3 7 11 11 18 8 6 -2 37 -12 68 -22z m189 -72 c0 -22 -95 -283 -103 -283 -21 0 -117 34 -117 41 0 6 51 155 95 276 3 9 20 7 64 -8 34 -12 61 -23 61 -26z m-304 -229 c27 -9 53 -20 58 -25 7 -6 -66 -240 -81 -258 -4 -6 -133 30 -133 37 0 24 87 262 95 262 6 0 34 -7 61 -16z m140 -50 c27 -9 52 -19 56 -23 7 -6 -71 -243 -83 -256 -7 -6 -99 22 -113 35 -9 9 71 260 83 260 4 0 30 -7 57 -16z"/>
<path id="7" d="M12170 3485 c-12 -36 -83 -240 -159 -454 -116 -329 -135 -391 -122 -397 35 -14 275 -94 276 -91 2 2 70 193 151 427 30 85 59 157 64 158 6 2 8 8 5 13 -3 5 17 74 46 154 28 80 50 148 48 150 -8 7 -212 75 -216 71 -2 -2 12 -9 31 -16 20 -6 36 -15 36 -20 0 -9 -91 -272 -97 -279 -5 -7 -115 34 -120 44 -2 6 18 71 45 145 43 119 52 135 71 133 30 -4 26 3 -8 15 l-30 11 -21 -64z m245 -26 c32 -12 55 -26 52 -32 -2 -7 -19 -52 -36 -102 -18 -49 -40 -109 -48 -133 -9 -24 -21 -41 -27 -39 -6 2 -34 12 -63 21 l-52 17 50 141 c27 77 49 142 49 144 0 8 20 4 75 -17z m-238 -255 c45 -16 52 -22 47 -39 -6 -19 -5 -19 8 -2 13 18 16 18 71 -3 31 -12 57 -25 57 -29 0 -9 -90 -264 -95 -269 -4 -5 -107 28 -117 37 -4 4 11 58 33 120 22 63 38 116 36 118 -2 2 -16 -31 -31 -74 -15 -43 -34 -97 -43 -120 l-15 -42 -47 18 c-25 10 -54 21 -63 24 -18 6 -8 40 77 276 3 7 11 11 18 8 6 -2 36 -13 64 -23z m-62 -316 c10 -10 -86 -278 -99 -278 -19 0 -111 34 -115 43 -2 5 18 70 44 146 l49 137 57 -21 c32 -11 61 -24 64 -27z m143 -43 c4 -3 -90 -269 -99 -279 -8 -9 -94 18 -113 35 -5 4 12 67 39 147 l49 139 60 -20 c34 -11 62 -21 64 -22z"/>
<path id="8" d="M12900 3303 c-10 -2 -31 -50 -57 -126 -47 -138 -196 -570 -241 -694 -16 -46 -25 -83 -20 -83 5 0 72 -25 149 -56 77 -31 142 -54 144 -52 7 7 315 886 315 899 0 4 -21 15 -47 25 -27 9 -84 32 -128 51 -97 42 -96 42 -115 36z m20 -14 c-12 -9 -11 -10 8 -6 12 3 20 2 17 -3 -2 -4 16 -13 40 -20 25 -7 45 -15 45 -19 0 -17 -93 -281 -99 -281 -4 0 -35 10 -70 21 -50 17 -61 25 -56 38 4 9 23 61 42 116 49 141 60 165 75 165 9 0 9 -3 -2 -11z m249 -105 c5 -5 -78 -254 -89 -267 -5 -5 -35 1 -68 13 l-61 22 50 141 c27 77 49 142 49 143 0 4 112 -45 119 -52z m-319 -214 c30 -12 61 -23 67 -25 9 -3 -1 -43 -33 -137 -26 -73 -49 -136 -53 -140 -7 -8 -109 26 -124 41 -4 4 14 69 40 144 27 75 48 137 48 137 0 0 25 -9 55 -20z m167 -57 c29 -9 53 -20 53 -24 0 -21 -93 -279 -101 -279 -8 0 -112 39 -117 45 -7 6 91 275 101 275 6 0 34 -8 64 -17z m-250 -244 l62 -20 -50 -142 c-27 -77 -51 -142 -52 -144 -2 -1 -33 9 -69 23 l-67 25 35 97 c58 164 65 182 73 182 4 0 35 -9 68 -21z m151 -54 c31 -10 52 -22 49 -29 -2 -6 -23 -68 -46 -138 -23 -69 -50 -132 -59 -140 -8 -7 -13 -8 -9 -2 4 7 -16 18 -54 29 -33 10 -58 21 -57 25 2 3 25 68 52 143 28 80 54 136 60 134 6 -2 35 -12 64 -22z"/>
<path id="52/53" d="M13608 2752 l-68 -3 -1 -47 c-1 -26 -3 -71 -5 -100 -3 -34 -1 -51 6 -47 6 4 10 -16 10 -55 0 -38 -4 -59 -10 -55 -5 3 -10 1 -10 -4 0 -7 56 -11 165 -11 l165 0 0 160 0 160 -62 1 c-35 1 -76 2 -93 3 -16 0 -60 0 -97 -2z m242 -87 l0 -75 -145 0 -145 0 0 75 0 75 145 0 145 0 0 -75z m0 -155 l0 -70 -145 0 -145 0 0 70 0 70 145 0 145 0 0 -70z"/>
<path id="9" d="M13155 2217 c-72 -48 -131 -91 -133 -96 -4 -12 340 -521 351 -521 6 0 213 137 265 176 3 2 -65 104 -313 469 l-40 60 -130 -88z m210 -46 c43 -65 79 -121 80 -126 0 -8 -114 -90 -118 -84 -8 10 -154 225 -160 236 -5 7 14 27 50 52 32 22 60 40 63 40 3 0 41 -53 85 -118z m-142 -74 c37 -56 75 -112 83 -124 15 -21 13 -23 -46 -63 -34 -23 -65 -38 -69 -34 -13 16 -161 234 -161 239 0 5 112 85 119 85 3 0 37 -46 74 -103z m326 -198 c39 -58 71 -111 71 -116 0 -15 -111 -86 -120 -76 -20 23 -160 233 -160 240 0 4 26 25 58 45 44 29 59 35 68 25 6 -7 43 -60 83 -118z m-139 -79 c44 -66 80 -123 80 -127 0 -4 -26 -25 -58 -45 -44 -29 -59 -35 -68 -25 -6 7 -45 62 -87 124 l-77 112 57 40 c32 22 61 40 65 40 4 1 44 -53 88 -119z"/>
<path id="10" d="M12574 1799 c-65 -44 -125 -86 -132 -93 -11 -10 18 -58 154 -257 91 -134 170 -248 174 -253 7 -7 269 162 269 174 0 3 -78 118 -173 257 l-173 252 -119 -80z m201 -56 l79 -116 -31 -26 c-17 -14 -45 -34 -61 -44 l-30 -17 -78 112 c-42 62 -77 118 -78 125 -1 13 91 81 110 82 6 1 46 -51 89 -116z m-135 -85 c41 -61 76 -114 78 -118 2 -4 -23 -26 -55 -49 -72 -51 -63 -54 12 -4 31 20 57 34 59 32 22 -27 156 -229 156 -235 -1 -10 -110 -88 -114 -82 -20 25 -327 481 -329 488 -2 10 91 79 108 79 6 0 44 -50 85 -111z m309 -170 l81 -117 -61 -42 c-36 -24 -65 -37 -70 -32 -24 24 -157 229 -152 236 8 12 107 77 115 75 4 -2 43 -56 87 -120z"/>
<path id="11" d="M4410 1755 c0 -43 1 -45 30 -45 l30 0 0 -164 c0 -90 3 -171 6 -180 5 -14 28 -16 155 -16 l149 0 0 175 0 175 25 0 c23 0 25 3 25 50 l0 50 -210 0 -210 0 0 -45z m410 -3 l0 -38 -107 2 c-60 1 -150 2 -200 3 l-93 1 0 35 0 35 200 0 200 0 0 -38z m-200 -212 l0 -160 -65 0 -65 0 0 160 0 160 65 0 65 0 0 -160z m149 -5 l1 -165 -65 0 -65 0 0 165 0 165 64 0 65 0 0 -165z m-182 -172 c-20 -2 -52 -2 -70 0 -17 2 0 4 38 4 39 0 53 -2 32 -4z"/>
<path id="12" d="M3710 1740 c0 -49 1 -50 30 -50 l30 0 0 -160 0 -160 140 0 140 0 0 161 0 161 35 -4 35 -4 0 53 0 53 -205 0 -205 0 0 -50z m400 0 l0 -40 -195 0 -195 0 0 40 0 40 195 0 195 0 0 -40z m-210 -205 l0 -155 -60 0 -60 0 0 155 0 155 60 0 60 0 0 -155z m134 146 c3 -4 3 -74 -1 -155 l-6 -146 -54 0 -53 0 0 155 0 155 54 0 c30 0 57 -4 60 -9z"/>
<path id="13" d="M9720 1398 l0 -316 160 -1 160 -2 0 315 0 315 -160 3 -160 3 0 -317z m150 148 l0 -154 -65 0 -65 0 0 154 0 154 65 0 65 0 0 -154z m160 -1 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z m-160 -305 l0 -140 -70 0 -70 0 0 140 0 140 70 0 70 0 0 -140z m160 0 l0 -140 -70 0 -70 0 0 140 0 140 70 0 70 0 0 -140z"/>
<path id="14" d="M9050 1550 l0 -159 160 -3 160 -3 0 163 0 162 -160 0 -160 0 0 -160z m310 0 l0 -150 -70 0 -70 0 0 150 0 150 70 0 70 0 0 -150z m-160 -5 l0 -145 -65 0 -65 0 -1 33 c0 17 -2 83 -5 145 l-4 112 70 0 70 0 0 -145z"/> <path id="34" d="M10560 1460 l0 -160 80 0 80 0 0 160 0 160 -80 0 -80 0 0 -160z m150 -5 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z"/>
<path id="37/38" d="M11210 1355 l0 -165 160 0 160 0 0 165 0 165 -160 0 -160 0 0 -165z m150 0 l0 -155 -65 0 -65 0 0 155 0 155 65 0 65 0 0 -155z m160 0 l0 -155 -70 0 -70 0 0 155 0 155 70 0 70 0 0 -155z"/>
<path id="15" d="M12007 1427 c-75 -51 -137 -95 -137 -99 0 -7 332 -502 350 -521 10 -11 275 171 274 187 -1 11 -287 441 -334 503 l-17 22 -136 -92z m222 -48 c46 -66 79 -124 75 -128 -39 -33 -117 -80 -124 -76 -5 3 -44 58 -86 121 -42 63 -78 113 -80 111 -3 -2 32 -57 76 -122 44 -66 80 -121 80 -125 0 -3 -26 -22 -58 -42 -44 -29 -59 -35 -68 -25 -6 7 -45 62 -87 122 l-75 110 126 88 c70 48 129 87 132 87 3 0 43 -54 89 -121z m175 -257 c43 -64 78 -121 78 -126 1 -6 -26 -29 -60 -53 l-61 -44 -78 118 c-44 65 -82 123 -86 130 -7 12 96 92 118 92 6 0 45 -52 89 -117z m-135 -101 c45 -66 81 -122 81 -124 0 -6 -108 -77 -117 -77 -9 1 -161 222 -165 240 -3 15 100 92 113 85 4 -3 44 -59 88 -124z"/>
<path id="16" d="M7580 1374 c-1 -33 -2 -110 -3 -172 l-2 -112 168 0 167 0 0 168 0 167 -165 4 -165 3 0 -58z m150 -114 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m164 142 c3 -5 2 -74 -1 -155 l-6 -147 -69 0 -68 0 0 155 0 155 69 0 c39 0 72 -4 75 -8z"/>
<path id="17" d="M6930 1250 l0 -160 83 0 82 0 4 160 3 160 -86 0 -86 0 0 -160z m150 0 l0 -140 -65 0 -65 0 0 140 0 140 65 0 65 0 0 -140z"/>
<path id="18" d="M4930 920 l0 -320 165 0 165 0 0 320 0 320 -165 0 -165 0 0 -320z m160 155 l0 -145 -75 0 -75 0 0 138 c0 76 3 142 7 145 3 4 37 7 75 7 l68 0 0 -145z m160 0 l0 -145 -75 0 -75 0 0 145 0 145 75 0 75 0 0 -145z m-160 -310 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z m160 0 l0 -155 -75 0 -75 0 0 155 0 155 75 0 75 0 0 -155z"/>
<path id="19" d="M3710 1180 c0 -49 1 -50 30 -50 l29 0 -6 -160 -6 -160 161 0 161 0 3 158 c3 156 3 157 26 156 20 -1 22 4 22 53 l0 53 -210 0 -210 0 0 -50z m410 0 l0 -40 -200 0 -200 0 0 40 0 40 200 0 200 0 0 -40z m-200 -210 l0 -150 -70 0 -70 0 0 150 0 150 70 0 70 0 0 -150z m150 0 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z"/>
<path id="20" d="M9080 913 l0 -303 170 0 170 0 0 300 0 299 -170 3 -170 3 0 -302z m320 152 l0 -135 -70 0 -70 0 0 135 0 135 70 0 70 0 0 -135z m-150 -5 l0 -130 -75 0 -75 0 0 130 0 130 75 0 75 0 0 -130z m150 -285 l0 -145 -70 0 -70 0 0 145 0 145 70 0 70 0 0 -145z m-152 -7 l-3 -143 -72 -3 -73 -3 0 146 0 145 75 0 76 0 -3 -142z"/>
<path id="21" d="M8430 975 l0 -165 160 0 160 0 0 165 0 165 -160 0 -160 0 0 -165z m140 0 l0 -155 -60 0 -60 0 0 155 0 155 60 0 60 0 0 -155z m170 -5 l0 -150 -80 0 -80 0 0 150 0 150 80 0 80 0 0 -150z"/>
<path id="22" d="M7580 840 c-1 -52 -2 -125 -3 -163 l-2 -67 163 0 162 0 0 160 0 160 -57 2 c-32 0 -104 2 -160 2 l-103 1 0 -95z m157 -67 l-2 -148 -67 -3 -68 -3 0 151 0 150 70 0 70 0 -3 -147z m153 -8 l0 -145 -65 0 -65 0 0 145 0 145 65 0 65 0 0 -145z"/>
<path id="23" d="M9760 776 l0 -166 165 0 165 0 0 163 0 162 -165 4 -165 3 0 -166z m150 -6 l0 -150 -65 0 -65 0 0 150 0 150 65 0 65 0 0 -150z m170 -5 l0 -145 -75 0 -75 0 0 145 0 145 75 0 75 0 0 -145z"/>
<path id="24" d="M6950 770 l0 -160 75 0 75 0 0 160 0 160 -75 0 -75 0 0 -160z m140 0 l0 -140 -60 0 -60 0 0 140 0 140 60 0 60 0 0 -140z"/>
<path id="25" d="M11244 917 c-2 -7 -3 -80 -2 -162 l3 -150 163 -3 162 -2 0 165 0 165 -160 0 c-122 0 -162 -3 -166 -13z m152 -147 c-1 -77 -5 -143 -9 -146 -3 -4 -32 -7 -64 -7 l-58 0 -3 147 -3 146 70 0 70 0 -3 -140z m161 -2 l-2 -143 -65 -6 c-36 -3 -68 -4 -72 -2 -5 2 -8 69 -8 149 l0 144 75 0 74 0 -2 -142z"/>
</g>
</svg>
</div>
</div>
<script>
<?php
$('#valider').click(function(){
document.getElementById('".$numero_bureau;"').style.color = "red";
});
?>
$('#map g').on("click", "path", function(){
replay_click(this.id);
});
function replay_click(clicked_id){
$.ajax({
url: 'find.php',
type: "post",
data: { getData: true },
dataType: 'html',
success: function(data, clicked_id)
{
var infos = data;
infos.foreach(info)
{
$('#list_Output').html(info);
}
}
});
}
</script>
</body>
</html>
And i got 2 php pages:
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=planinteractif;charset=utf8',
'root', 'root');
if(isset($_POST['nom'])){
$numero_bureau = $bdd->query('SELECT numero_bureau from User where nom=' +
$_POST['nom'] + ';')
}
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=planinteractif;charset=utf8',
'root', 'root');
if(isset($_POST['nom'])){
$infos = $bdd->query('SELECT * from User where numero_bureau=' +
$_POST['clicked_id'] + ';')
}
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
?>
And a irrelevant css page i think, I am looking forward an answer i think its pretty easy but i am a beginner in web tech. TY
EDIT : taken note of advices you gave

Several issues:
your <form> has an action, but no submit control, so that action is never triggered.
onclick="Validate.php" doesn't make sense. The attribute expects a Javascript command for client-side execution.
Anyway, you are then defining another event listener function with $document.getElementById('valider').click() for the same event. THat mixes jQuery syntax with native syntax. Either you use jQUery and write
$('#valider').click(function...);
or you use the native API and write
document.getElementById('valider').addEventListener(function...);
The listener function contains one static $numero_bureau that is already mixed in server-side. Which number will that be?
attributes to elements in the SVG namespace are case-sensitive. So the event listener attribute must be onclick, not onClick.
the function called is reply_click, but the function defined has the name replay_click.
the this in that function call is the global window object, not the element as you seem to think. Binding this to an element is a jQuery facility. For it to work, you need to define your event listener differently. Do not define a onclick attribute, but write this procedure as part of the script:
$('#map g').on("click", "path", function () {
replay_click(this.id);
});
This will add an event handler to the group enclosing the paths, but the this will be bound to the individual <path> element that was actually clicked.

Automatically scale an SVG to its parent

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

Draw custom background shapes for tooltips in highcharts

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;
}