как использовать матричную функцию SVG для масштабирования SVG с правильной математикой преобразования

Question

Если вы посмотрите на фрагмент ниже, я хочу реализовать масштабирование изображения SVG.

Я хочу, чтобы оно постепенно увеличивало и уменьшало масштаб.

Я использую функцию матрицы иЯ знаю, что могу уменьшить масштаб, изменив первую и четвертую или матрицу или a и d.

Программно я собираюсь изменить матрицу преобразования, но я хочу сохранить svg в центре ине заставляйте его двигаться в верхнем левом или нижнем правом углу при увеличении и уменьшении.

Какова моя математика для последних 2 элементов матрицы или dx и dy, чтобы держать мою матрицу по центру, так какзум? 1013

<svg width="500" height="150">
<rect x="20" y="20" width="50" height="50" transform="matrix(.5,0,0,.5,0,0)" style="fill: #cc3333"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(1,0,0,1,0,0)" style="fill: #cc3333"></rect>

<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,0,0)" style="fill: #cc3333"></rect>

</svg>

Answer 1

Так работает математика.Поскольку источник преобразования для SVG находится в начале SVG CANVAS (а не объекта, в отличие от CSS) - сначала нужно перевести форму, чтобы ее центр находился в начале, затем масштабировать ее, а затем переместить центр обратно вего исходное положение.

Сначала - небольшая заметка - для преобразования между [a, b, c, d, e, f] SVG-преобразования в «реальную» базовую матрицу, вы должны добавить третью строку кматрица 0,0,1, другими словами, для преобразования из SVG-преобразования [a, b, c, d, e, f] в реальную матрицу, отображение:

[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]

Итак - дляВаша первая фигура - ваша масштабная матрица выглядит следующим образом:

[ 1.5  0  0 ]
[  0  1.5 0 ]
[  0   0  1 ]

и ваш перевод обратно в исходную матрицу (например, минус х, минус ширина / 2):

[  1  0  -45 ]
[  0  1  -45 ]
[  0  0   1 ]

Умножитьих вместе (удобный инструмент для умножения матриц ), и вы получите эту промежуточную матрицу:

[  1.5  0  -45 ]
[  0  1.5  -45 ]
[  0    0   1  ]

Затем, умножьте эту промежуточную матрицу с вашим «перевести обратно в исходную матрицу положения», которая:

[  1  0   45 ]
[  0  1   45 ]
[  0  0   1  ]

и результат умножения матрицы:

[  1.5  0 -22.5 ] 
[  0  1.5 -22.5 ] 
[  0    0   1   ]

Тада.

<svg width="500" height="150">
<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,-22.5,-22.5)" fill="green"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(1,0,0,1,0,0)" fill="blue"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(.5,0,0,.5,22.5,22.5)" fill="red"></rect>




</svg>

Answer 2

Вы можете играть с transform-origin.Значения задаются следующим образом: (rec.x + rect.width/2)px и (rect.y + rect.height/2)px

rect{
  transform-origin: 45px 45px;
}

<svg width="500" height="150">

<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,0,0)" style="fill: #003333"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(1,0,0,1,0,0)" style="fill: #cc3333"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(.5,0,0,.5,0,0)" style="fill: #0c3003"></rect>

</svg>