Задать вопрос
@Egor1324
javascript

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

Всем привет.
Имеется 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 - при этом увеличение происходит, но квадрат смещается.
Заранее спасибо.
  • Вопрос задан
  • 1720 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
alvvi
@alvvi
export default apathy;
Для одного элемента, для коллекции так же просто пройтись циклом:
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 или заинлайнить.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить адаптивную верстку на Tilda Zero Block
20 апр. 2024, в 06:39
4000 руб./за проект
Доработка аддона для Xenforo v2.2.13
20 апр. 2024, в 06:06
200 руб./за проект
Привязка к Маркетплейсам 1С Розница 2.3
20 апр. 2024, в 05:26
10000 руб./за проект
Ещё заказы