How to scale and center a path inside svg in javascript

<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,

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You’ve set the viewbox to have 80 units on X axis and 80 units on the Y axis.

The path coordinates are in the hundreds, so you’ve drawn the shape much much bigger than the size of the viewing area.

So just increase the values of the x and y axes of the viewing area (the viewBox)

Pls can u help me write out the javascript to achieve that, thanks

It doesn’t need any JavaScript, just literally use larger numbers for viewBox, 80x80 is too small

Pls can u help me with the formula to calculate the new x and y coordinates of the viewbox

Ive tried to use 800*800, but its not centering the path at the center of the svg

Just look at the path coordinates, what’s the biggest number? Replace the 80s in viewBox="0 0 80 80" with whatever the number is

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.