svg - 如何将svg图形组缩放到所需大小(而不是按因子)？

Question

我有svg图形组(我的意思是路径，重新弯曲等)。我想将小组扩大到一定规模，例如扩大到70,70。我知道svg提供了比例转换，但是比例转换需要我不知道的比例因子，因为组可以有很多形状，而且确定整个组的边界大小并不容易。
我玩了svg元素的viewBox参数和preserveAspectRatio参数，但无法获得预期的结果(比例组为70,70)。
也许可以通过maxtrix变换来缩放组，或者以其他方式存在吗？

Answer 1

您可以使用getBBox()函数检索图形的当前大小，然后使用宽度和高度来计算应应用于图形以使其适合所需大小的比例因子。

在下面的示例中，组 g1 中的图形被缩放以适合宽度和高度设置为70的矩形。

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 480 240" width="480" height="240" xmlns="http://www.w3.org/2000/svg" >
 <g id="g1">
    <rect x="20" y="20" width="100" height="100" fill="red" />
    <rect x="40" y="60" width="100" height="100" fill="blue" />
 </g>
 <script type="application/ecmascript"> 

    var width=70, height=70;
    var node = document.getElementById("g1");
    var bb = node.getBBox();
    var matrix = "matrix("+width / bb.width+", 0, 0, "+height / bb.height+", 0,0)";
    node.setAttribute("transform", matrix);

 </script>
</svg>