transform matrix formula
Budget: $30 – $250 USD
i need the formulaes to calculate the new x and y, width and height and rotation values given a transformation matrix for some svg shapes.
see attached image
e.g
<rect x="5257" y="5165" width="236" height="164" transform="matrix(0.9436,-0.4013,0.3007,0.707,-649.7009,3703.3824)"></rect>
newX = x * a + e
newY = y * d + f
etc...
need formulaes for the following shapes:
1) line:
<line x1="157" x2="254" y1="236" y2="127" transform="matrix(1.9371,0.9049,-0.9049,1.9371,61.485,-368.3401)" style="stroke-width: 2px;" stroke="#222f3e"></line>
here i need the new x1,x2,y1,y2 values given the matrix.
2) rectangle:
<rect x="468" y="237" width="347" height="193" style="stroke-width: 2px;" stroke="#222f3e" fill="rgba(0,0,0,0)" vector-effect="non-scaling-stroke" transform="matrix(0.5717,-0.2758,0.3906,0.8099,104.4499,187.8228)"></rect>
need x,y,width,height,rotate() values given the matrix.
3): ellipse:
<ellipse cx="254" cy="258" rx="98" ry="51" style="stroke-width: 2px;" stroke="#222f3e" fill="rgba(0,0,0,0)" class="els" vector-effect="non-scaling-stroke" transform="matrix(0.8726,-0.4885,0.34,0.6074,-49.3604,317.8803)"></ellipse>
need new cx,cy,rx,ry values given the matrix.
additional info:
i am working with svg and css. i will use math.js to do the calculations (i will do this).
resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
https://www.w3.org/TR/SVG/coords.html#TransformAttribute
see attached image
e.g
<rect x="5257" y="5165" width="236" height="164" transform="matrix(0.9436,-0.4013,0.3007,0.707,-649.7009,3703.3824)"></rect>
newX = x * a + e
newY = y * d + f
etc...
need formulaes for the following shapes:
1) line:
<line x1="157" x2="254" y1="236" y2="127" transform="matrix(1.9371,0.9049,-0.9049,1.9371,61.485,-368.3401)" style="stroke-width: 2px;" stroke="#222f3e"></line>
here i need the new x1,x2,y1,y2 values given the matrix.
2) rectangle:
<rect x="468" y="237" width="347" height="193" style="stroke-width: 2px;" stroke="#222f3e" fill="rgba(0,0,0,0)" vector-effect="non-scaling-stroke" transform="matrix(0.5717,-0.2758,0.3906,0.8099,104.4499,187.8228)"></rect>
need x,y,width,height,rotate() values given the matrix.
3): ellipse:
<ellipse cx="254" cy="258" rx="98" ry="51" style="stroke-width: 2px;" stroke="#222f3e" fill="rgba(0,0,0,0)" class="els" vector-effect="non-scaling-stroke" transform="matrix(0.8726,-0.4885,0.34,0.6074,-49.3604,317.8803)"></ellipse>
need new cx,cy,rx,ry values given the matrix.
additional info:
i am working with svg and css. i will use math.js to do the calculations (i will do this).
resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
https://www.w3.org/TR/SVG/coords.html#TransformAttribute