Javascript 背景变化时缩放和转换SVG

我正在研究一个需要缩放和转换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);

---

谢谢。

欢迎来到StackOverflow！包括图片对其他人回答您的问题非常有帮助。此外，我建议提供您已经编写的代码，以帮助更好地理解您的思路。