SVG Path scaling and centering in Javascript

[Olatuneday]

<span style="width:80px; height:80px">
     <svg id="tooltip_svg" xmlns="http://www.w3.org/2000/svg" width="80" height="80" preserveAspectRatio="xMinYMin"
                fill="red" stroke="#282A35" viewBox="0 0 80 80" fill-rule="evenodd" clip-rule="evenodd" 
                style="padding: 5px; border: 0; overflow: visible;">
                <path d="M504 489L513 492L517 489L522 491L525 487L538 487L543 481L560 468L564 462L574 458L582 444L587 442L594 436L597 431L610 430L605 418L605 412L598 414L593 413L583 423L574 419L561 420L552 405L547 408L546 414L538 417L538 423L534 429L523 423L521 419L518 428L508 431L500 431L501 439L508 441L495 453L497 457L487 469L472 471L498 481z" />
      </svg>
</span>

Pls i just want the path to take the entire svg size of 80/80,

[Gandalf]

Why are you trying to do this in JavaScript?

[m_hutley]

viewBox="480 390 120 120"
would put the image in the window. I could try and figure out the maths on redoing the coordinate system for the path, but… i just plonked it in a CSV viewer and poked numbers till it worked.

[Archibald]

@Olatuneday

I just want the path to take the entire svg size of 80/80

By using preserveAspectRatio="none" the graphic will stretch vertically to take up the entire size of 80x80:

(I have included a blue border to show the 80x80)

[Olatuneday]

Thanks for effort, but If I use the viewbox u generated for me, it only work for that path alone, it does not work for every other path I generated at run time .

[Olatuneday]

I’m trying to generate those coordinates in JavaScript because its appears in a tooltip text, so i need it at runtime

[Olatuneday]

Hello house , pls is there any other way i can determine the viewbox to set the svg to for each of tje path i put in the svg, pos kindly help me do that formula , its really giving me tough time pls…

[m_hutley]

You would have to break down the path instructions into their coordinate pairs, find the extrema of each axis, and construct a bounding box that encompasses the path.

In your example, the X axis has extrema [472,610] and the Y axis has extrema [405,492].
The difference in the X extrema is 138; the difference in the Y extrema is 87. Your bounding box would need to be 138x138 to fit all of the shape in; the X coordinates are being used, so 472 would be the coordinate of the ‘left’ indicator of the box; the ‘top’ indicator of the box should be 405 + 43.5 - 69 = 379.5; to keep coordinates in the integer range, truncate;
Mathematically, your example should be viewboxed as 472 379 138 138.

[m_hutley]

Javascript does make this easier by having a function to get the bounding box (getBBox), but the box it returns is a rectangle, not a square, so you’ve still got some manipulation to do.

[PaulOB]

@Olatuneday

pls is there any other way i can determine the viewbox to set the svg to for each of tje path i

I believe there is a solution in this article.

How to Perfectly Fit an SVG to its Contents Using JavaScript

[m_hutley]

Sort of. This generates a rect around multiple elements; I took “each” to mean “a series of single elements”; at which point, the code is just getBBox of the element. The article returns a rectangle, rather than a square.

[Olatuneday]

I really appreciate u guys for ur contributions, all ideas worked for my project, and most especially the one given by PaulOB, i really appreciate this, this platform is awesome, stackoverflow didnt have the kind of response i got from here, thanks all.