javascript - 使用变换矩阵根据窗口调整大小拉伸 svg 圆

Question

我在我的应用程序中使用 svg circle 。我需要在调整窗口大小时调整圆的大小，我通过为我的 svg 设置视图框获得此功能，但我需要使用 transform 属性。我搜索了很多关于变换的信息，我的应用程序得到了“矩阵”，但我无法根据窗口大小调整它的大小，我想知道当窗口动态调整大小时如何根据窗口大小计算矩阵值，而且我'我仍然对矩阵值感到困惑。这是我的svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="true" style="overflow: hidden; position: relative;">
        <circle cx="100" cy="100" transform="matrix(1,0,0,1,0,0)" r="50" fill="green"></circle>
</svg>

我在这里创建了一个演示。 任何建议都应该不胜感激。

注意：在此演示中，圆圈不会调整大小

Answer 1

如果你给你的圈子一个id="circle"属性，你可以在你的演示中添加这样的东西

var originalBBox = document.getElementById("container").getBoundingClientRect();
var circle = document.getElementById("circle");

window.addEventListener('resize', function() {
    var newBBox = document.getElementById("container").getBoundingClientRect();
    circle.transform.baseVal.getItem(0).matrix.a = newBBox.width / originalBBox.width;
    circle.transform.baseVal.getItem(0).matrix.d = newBBox.height / originalBBox.height;
}, true);