How to increase path svg?

Question

css

Hello.
There is svg

<svg class="scheme__svg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 841.8897705 595.2755737">
<g>
<g class="seat">
<path d="M774.1643066,134.4565735h-8.5321655c-0.6237183,0-1.1339111-0.5101929-1.1339111-1.1337891v-8.5323029 c0-0.6236038,0.5101929-1.1339035,1.1339111-1.1339035h8.5321655c0.6237183,0,1.1339111,0.5102997,1.1339111,1.1339035v8.5323029 C775.2982178,133.9463806,774.7880249,134.4565735,774.1643066,134.4565735z"></path>
<text transform="matrix(1 0 0 1 768.2949219 131.4788971)">1</text>
</g>
<g class="seat">
<path d="M774.1643066,147.3553772h-8.5321655c-0.6237183,0-1.1339111-0.5101929-1.1339111-1.1338959v-8.532196 c0-0.623703,0.5101929-1.1339111,1.1339111-1.1339111h8.5321655c0.6237183,0,1.1339111,0.5102081,1.1339111,1.1339111v8.532196 C775.2982178,146.8451843,774.7880249,147.3553772,774.1643066,147.3553772z"></path>
<text transform="matrix(1 0 0 1 768.2949219 144.7288971)">2</text>
</g>
<g class="seat">
<path d="M774.1643066,160.2544861h-8.5321655c-0.6237183,0-1.1339111-0.5102997-1.1339111-1.1339111v-8.5323029 c0-0.6235962,0.5101929-1.1337891,1.1339111-1.1337891h8.5321655c0.6237183,0,1.1339111,0.5101929,1.1339111,1.1337891v8.5323029 C775.2982178,159.7441864,774.7880249,160.2544861,774.1643066,160.2544861z"></path>
<text transform="matrix(1 0 0 1 768.2949219 157.6043854)">3</text>
</g>
</g>
</svg>

How, when hovering over the "seat" class, increase the square (path) so that it remains in place?
Tried through css: matrix, scale - while the increase occurs, but the square is shifted.
Thanks in advance.

Answer 1

For a single element, for a collection, it's just as easy to loop through:

const $square = $('.seat path') 
const boundingBox = $square[0].getBBox()
const xCenter = (boundingBox.width / 2) + boundingBox.x
const yCenter = (boundingBox.height / 2) + boundingBox.y
$square.css('transform-origin', `${xCenter}px ${yCenter}px`)

Explanation: as far as I understand, you need to scale exactly from the center of the element, that is, if it were HTML, transform-origin: 50% 50%;it would save the situation, however, for parts of SVG, as far as I know, transform-origin is considered from the entire element, and not from the element itself on which it is applied , so the correct values ​​must be calculated using JS or inlined. <svg>