How to find svg viewbox from absolute path points in javascript?

274 views Asked by At

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?

0

There are 0 answers