douguan8940 2019-01-17 21:48
浏览 154
已采纳

提供x,y,宽度和高度值,如何获得从中心缩放的svg变换矩阵

I have a code that generates gif file from svg using php and imagemagick. Below is the sample svg code. Assuming the animation is going to be created by tweening the scale transform scale value from 0 to 1, how do I get the transform matrix that'll center the transform origin using svg element properties x,y,width, height?

Note: I do all the computation with php and the conversion to raster using Imagemagick which I dont think supports the css transform-origin style.

Currently, the transition starts from the left. I want to translate it using matrix.

The link below is the example gif of the current implementation https://i.imgur.com/juMX3uD.gifv

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

The transformation happens here

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

</div>
  • 写回答

2条回答 默认 最新

  • dougu5847 2019-01-18 11:01
    关注

    After several hours of fighting with code, I got the fix I was looking for.

    Below is the final matrix calculation I implemented

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 stm32f103c8t6采集HLK-LD2450毫米波雷达传感器数据并打印显示距离和角度
  • ¥15 不重复生成字母+数字交易号
  • ¥15 AD封装导入后层混乱了
  • ¥15 如何将excel中的数据导入ansys中
  • ¥15 MATLAB中图像问题
  • ¥15 rk3399 安卓7.1 应用音频无声音
  • ¥20 Chatgpt被封号以后,换用apple和gmail注册失败,直接跳转封号界面
  • ¥15 这几个有点疑问解答一下
  • ¥15 r语言如何绘制这样的降水地图
  • ¥15 服务器一块硬盘重启过程中安装后,硬盘不识别了怎么修复?