在背景更改时缩放和翻译SVG

Question

我正在研究一个需要扩展和转换SVG元素的问题。这是一个小背景。

使用Web-GL将图像绘制到画布上。然后在Web-GL画布顶部绘制一条线或圆作为SVG元素。然后可以旋转WebGL图像。

如果旋转后图像尺寸不适合视口，则可以正确缩放它们以适合视口，这会更改图像的尺寸。

旋转图像后，然后使用矩阵旋转SVG元素。 SVG元素已旋转，但是，现在WebGL图像尺寸已更改，SVG元素未针对背景WebGL图像正确缩放。 SVG元素的位置也不正确。

我知道SVG元素需要根据新的WebGL维度进行缩放和翻译，但我不知道如何去做。我已将链接附加到应该说明问题的图像（我无法直接发布图像）。谢谢你的任何建议!!

以下是旋转SVG元素的代码。

var annotation = document.getElementsByTagName("line"),
    yCenter = svg.height.baseVal.value / 2,
    xCenter = svg.width.baseVal.value / 2,
    radians = 90 * (Math.PI / 180),
    cos = Math.cos(radians),
    sin = Math.sin(radians);

var pre = Matrix.create([
    [1, 0, -xCenter]
    [0, 1, -yCenter]
    [0, 0, 1]));

var rotate = Matrix.create([
    [cos, -sin, 0]
    [sin, cos, 0]
    [0, 0, 1]));

var post = Matrix.create([
    [1, 0, xCenter]
    [0, 1, yCenter]
    [0, 0, 1]));

var multipliedMatrix = post.multiple(rotate.muliple(pre);
var a = multipliedMatrix.e(1, 1),
    b = multipliedMatrix.e(2, 1),
    c = multipliedMatrix.e(1, 2),
    d = multipliedMatrix.e(2, 2),
    e = multipliedMatrix.e(1, 3),
    f = multipliedMatrix.e(2, 3);
var matrix = "matrix(" + a + " " + b + " " + c + " " + d + " " + e + " " + f + ")";
annotation.setAttribute("transform", matrix);

谢谢。