SVG - 将转换矩阵计算到具有不同viewbox的SVG

Question

我有一个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/

- Peter

---

看起来你正在尝试编写自己的getCTM或getScreenCTM函数，为什么不使用内置的SVG DOM函数呢？ - Robert Longson

我不知道它的存在。但这只是一个JS解决方案，对吧？ - Peter

谢谢回复，但我需要一个 PHP 解决方案 :/ - Peter

我知道，你需要将代码移植，因为据我所知，没有PHP解决方案。 - Robert Longson

你能否发布一下你正在使用作为输入的SVG以及你所期望的输出？ - n00dl3

Answer 1

我本意是想把这个作为评论，但我的声望不允许。

我想知道这是一个打字错误还是你的代码也有错误。

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

我猜应该是这样：

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

希望能对你有所帮助！

- Juniperus