我有一个SVG,它的viewbox是0 0 500 500
,并且有一个transform matrix 0.8,0,0,0.8,54,54
现在我想将这个transform添加到其他SVG中。问题是所有其他SVG具有不同的viewbox。因此,我编写了一个函数来基于viewbox计算变换...
getAdjustedTransform('0.8,0,0,0.8,54,54','0 0 500 500','0 0 100 100');
目前它的工作相当不错。
但是现在我发现另一个问题。一些SVG具有具有不同高度和宽度(不是正方形)的视口。
我尝试在这里解决这个问题。
$viewboxWH_diff = $toThisViewBox_arr[2]/$toThisViewBox_arr[3];
$transform_arr_adjusted[5] = $transform_arr_adjusted[5]*$viewboxWH_diff;
但我的计算是不正确的。有什么想法我错在哪里了吗?
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;
}
编辑:
此函数生成的SVG结果
http://jsfiddle.net/nw6ykszn/