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

Question

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

1

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

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

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

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

Какова моя математика для последних двух элементов матрицы или dx и dy чтобы моя матрица была центрирована по мере ее масштабирования?

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

dagda1 13 окт. 2018, в 23:34

Источник

Теги:

javascript

svg

2 ответа

0

Вы можете играть с 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>

scraaappy 13 окт. 2018, в 19:09

Ещё вопросы

Michael Mullany · Accepted Answer · 2018-10-14T00-48-00.000Z

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

Сначала - небольшая заметка - преобразовать между [a, b, c, d, e, f] SVG tranform в "реальную" базовую матрицу, вы должны добавить третью строку к матрице из 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 ]

и ваш перевод обратно в исходную матрицу (например, минус x, минус ширина /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>

Откуда это (минус х, минус ширина / 2), когда вы заявляете, и ваш перевод обратно в исходную матрицу (например, минус х, минус ширина / 2):
Это расстояние между центром вашего прямоугольника и началом координат. Атрибут "x" вашего прямоугольника равен 20, а ширина вашего прямоугольника равна 50 - поэтому центр вашего прямоугольника находится в (20 + 50/2) = 45. Таким образом, чтобы перевести обратно в начало координат, это -45.