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

Question

我有svg图形组(我的意思是路径,recatangles等).我想将组缩放到一定的大小,例如70,70.我知道svg提供了比例变换,但是比例变换需要我不知道的比例因子,因为组可以有很多形状,并且不容易确定整个组的边界大小.
我玩了svg elemenent的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>