Предоставляя значения x, y, width и height, как я могу получить матрицу преобразования SVG, которая масштабируется от центра

Question

У меня есть код, который генерирует GIF-файл из SVG, используя PHP и ImageMagick. Ниже приведен пример кода SVG. Предполагая, что анимация будет создана путем изменения значения масштаба преобразования масштаба от 0 до 1, как получить матрицу преобразования, которая будет центрировать источник преобразования с использованием свойств элемента svg x, y, width, height?

Примечание. Все вычисления выполняются с помощью php, а преобразование в растр выполняется с помощью Imagemagick, который, как мне кажется, не поддерживает стиль происхождения CSS-преобразования.

В настоящее время переход начинается слева. Я хочу перевести это с помощью матрицы.

Ссылка ниже является примером GIF текущей реализации https://i.imgur.com/juMX3uD.gifv

Преобразованный SVG

<svg xmlns="http://www.w3.org/2000/svg" class="layer" overflow="visible" 
stroke="none" stroke-width="0" preserveAspectRatio="none" 
id="layer_1547759965149_0506449632092969" width="135.24545454545" 
height="110.9375" x="86.896363636365" y="84.286250000001"><g 
    id="translateLayer" transform="matrix(1 0 0 1 0 0)"><g id="effectLayer" 
transform="rotate(44.596407613288 67.622727272727 55.46875)" 
fill="#FF4400"><svg viewBox="0 0 657.01 569" width="100%" height="100%" 
preserveAspectRatio="none" overflow="hidden"><g id="Layer_2" data- 
name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon points="0 569 
328.49 0 657.01 569 0 569"/></g></g></svg></g></g></svg>

Преобразование происходит здесь

<g id="translateLayer" transform="matrix(1 0 0 1 0 0)"></g>

Answer 1

После нескольких часов борьбы с кодом я получил исправление, которое искал.

Ниже приведен итоговый матричный расчет, который я реализовал

x = (x/2);
y = (y/2);
matrix(scaleX 0 0 scaleY (x-scaleX*x) (y-scaleY*y));

https://i.imgur.com/qAaZ1Tl.gifv

Answer 2

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

Источник - центральная точка треугольника. В данном случае это половина width и 2/3 height изображения.

Так почему бы просто не применить последующие преобразования, а не бороться с матричным вычислением? А функция rotation даже принимает параметры источника.

    var
      svg = document.getElementById('layer_1547759965149_0506449632092969'),
      sca = svg.getElementById('translateLayer'),
      rot = svg.getElementById('effectLayer'),
      deg = 0,

      cx = svg.getAttribute('width') / 2,
      cy = svg.getAttribute('height') * 2/3
    ;

    function rotate()
    {
      deg++;
      let scale = 1 + Math.sin(deg/180*Math.PI);
      rot.setAttribute('transform',  (()=>`rotate(${deg} ${cx} ${cy})`)());
      sca.setAttribute('transform',  (()=>`translate(${cx} ${cy}) scale(${scale} ${scale}) translate(-${cx} -${cy})`)());
    }
    setInterval(rotate, 50);

    <svg xmlns="http://www.w3.org/2000/svg" class="layer" id="layer_1547759965149_0506449632092969"
         overflow="visible"
         stroke="none" stroke-width="0" preserveAspectRatio="none"
         width="135.24545454545" height="110.9375"
         x="86.896363636365" y="84.286250000001">
      <!--<g id="translateLayer" transform="matrix(0 67.622727272725 0  0 73.95833333333333   0)">-->
      <g id="translateLayer" transform="matrix(2 0 0 2 0.5 0.5)" transform-origin(200,100)>
        <g id="effectLayer"
           fill="#FF4400">
          <svg viewBox="0 0 657.01 569" width="100%" height="100%"
               preserveAspectRatio="none" overflow="hidden">
            <g id="Layer_2" data-name="Layer 2">
              <g id="Layer_1-2" data-name="Layer 1">
                <polygon points="0 569  328.49 0   657.01 569   0 569"/>
              </g>
            </g>
          </svg>
        </g>
      </g>
    </svg>