SVG. Compute SVG conversion matrix with another viewport.

Question

I have an SVG with viewbox 0 0 500 500 and a matrix 0.8,0,0,0.8,54,54 transformation of matrix 0.8,0,0,0.8,54,54

Now I want to add this conversion to other SVGs. The problem is that all other SVGs have a different viewbox. So I wrote a function to compute the transform based on the viewport ...

 getAdjustedTransform('0.8,0,0,0.8,54,54','0 0 500 500','0 0 100 100'); 

works pretty well.

But now I have found another problem. Some SVGs have a viewbox with different heights and widths (not sqaure).

I am trying to fix this problem here.

 $viewboxWH_diff = $toThisViewBox_arr[2]/$toThisViewBox_arr[3]; $transform_arr_adjusted[5] = $transform_arr_adjusted[5]*$viewboxWH_diff; 

But my calculations are wrong. Any ideas what I'm doing wrong?

 function getAdjustedTransform($transform,$viewBox,$toThisViewBox) { $transform_arr = explode(",", $transform); // transform from the source SVG $viewBox_arr = explode(" ", $viewBox); // viewbox from the source SVG $toThisViewBox_arr = explode(" ", $toThisViewBox); $transform_arr_adjusted = array(); $val_1 = $transform_arr[4] / $viewBox_arr[2]; $val_2 = $transform_arr[5] / $viewBox_arr[3]; $transform_arr_adjusted[0] = $transform_arr[0]; $transform_arr_adjusted[1] = $transform_arr[1]; $transform_arr_adjusted[2] = $transform_arr[2]; $transform_arr_adjusted[3] = $transform_arr[3]; $transform_arr_adjusted[4] = $val_1 * $toThisViewBox_arr[2]; $transform_arr_adjusted[5] = $val_1 * $toThisViewBox_arr[3]; // if viewbox with and height != if($toThisViewBox_arr[2] != $toThisViewBox_arr[3]) { if($toThisViewBox_arr[2] > $toThisViewBox_arr[3]) { $viewboxWH_diff = $toThisViewBox_arr[2]/$toThisViewBox_arr[3]; $transform_arr_adjusted[5] = $transform_arr_adjusted[5]*$viewboxWH_diff; } else { $viewboxWH_diff = $toThisViewBox_arr[3]/$toThisViewBox_arr[2]; $transform_arr_adjusted[5] = $transform_arr_adjusted[5]*$viewboxWH_diff; } } $transform_arr_adjusted = implode(',',$transform_arr_adjusted); return $transform_arr_adjusted; } 

EDIT:
The result of this function is SVG
http://jsfiddle.net/nw6ykszn/

Answer 1

I wanted to put this as a comment, but my reputation does not allow me.

Interestingly, this is a typo or a mistake in your code.

 $transform_arr_adjusted[5] = $val_1 * $toThisViewBox_arr[3]; 

I guess this should be:

 $transform_arr_adjusted[5] = $val_2 * $toThisViewBox_arr[3]; 

Hope this helps!