I have this absolute svg path (generated through snap.svg):
[
["M", 228.87, 219],
["L", 42.129999999999995, 218.39],
["C", 42.19, 218.39, 42.24999999999999, 218.26999999999998, 42.309999999999995, 218.05999999999997],
["C", 45.69604818268118, 215.87679077211533, 49.409674477925975, 214.24954725001717, 53.309999999999995, 213.23999999999998],
["C", 59.925962526359555, 211.59043216949715, 66.69590590541075, 210.63526689076963, 73.50999999999999, 210.39],
["C", 111.32, 208.26999999999998, 149.60999999999999, 215.57, 187.13, 212],
["C", 194.23, 211.32, 201.26999999999998, 210.25, 208.45, 210.05],
["C", 215.07694185616865, 209.86704384410132, 221.70312226030103, 210.44075364111734, 228.20000000000002, 211.76000000000002],
["C", 228.35, 216.28, 228.56, 219, 228.87, 219],
["Z"]
]
I need to display this path on the HTML page. I wrote the below logic to generate the view box out of these values: 39.129999999999995 208.39 228 42.
The problem seems to be with the width and height: 228 42
var left = [];
var top = [];
absValue.filter(path => path[0] === 'L').forEach((r, index) => {
left = left.concat(r[1]);
top = top.concat(r[r.length-1]);
})
let topPosition = Math.min.apply(Math, top);
let leftPosition = Math.min.apply(Math, left);
console.log(isFinite(leftPosition))
if(!isFinite(leftPosition)) {
left = [];
top = [];
absValue.filter(path => path[0] === 'C').forEach((r, index) => {
left = left.concat(r[1]);
top = top.concat(r[r.length-1]);
})
console.log(absValue)
topPosition = Math.min.apply(Math, top);
leftPosition = Math.min.apply(Math, left);
}
const values = absValue.join().match(/(\-?\d+(\.\d+)?)/gi).map(value => parseInt(value).toFixed(2));
const max = Math.max.apply( Math, values );
const min = Math.min.apply( Math, values );
console.log(`${leftPosition} ${topPosition} ${max} ${min}`)
/// THE PROBLEM SEEMS TO BE ${max} ${min}
return `${leftPosition - 3} ${topPosition - 10} ${max} ${min}`;
My project
<svg class="svg_vector" xmlns="http://www.w3.org/2000/svg"
attr.viewBox="{{object.path | getSvgD | svgViewBox }}"
preserveAspectRatio="xMidYMid meet"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="none">
<path attr.d="{{object.path | getSvgD}}"
></path>
</svg>
The problem is the viewBox, coordinates are not right, Iwant the path to be a complete fit in the outer svg tag.I see the problem with width and height. Can someone help me out in finding the right width/height from the path values of the svg?