Как увеличить path svg?

Question

[Егор Астрейко]

Всем привет.
Имеется 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>

Как при наведении на класс "seat", увеличить квадрат (path), что бы он остался на месте ?
Пробовал через css: matrix, scale - при этом увеличение происходит, но квадрат смещается.
Заранее спасибо.

Answer 1

[alvvi]

Для одного элемента, для коллекции так же просто пройтись циклом:

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`)

Объяснение: насколько я понимаю вам нужен scale именно от центра элемента, то есть если бы это был HTML transform-origin: 50% 50%; спасло бы ситуацию, однако для частей SVG, насколько я знаю, transform-origin считается от всего <svg> элемента, а не от самого элемента на котором он применен, поэтому верные значения надо высчитать с помощью JS или заинлайнить.

Comments

[Егор Астрейко]

Спасибо )