¿Cómo puedo escalar el grupo de gráficos svg al tamaño deseado (no por factor)?

Question

Tengo svg graphics group (me refiero a rutas, recatagramos, etc.). Quiero escalar el grupo a cierto tamaño, por ejemplo, a 70,70. Sé que svg proporciona transformación de escala, pero la transformación de escala necesita un factor de escala que no sé porque el grupo puede tener muchas formas y no es fácil determinar el tamaño de delimitación de un grupo completo.
Jugué con el parámetro viewBox de svg elemenent y preserveAspectRatio pero no pude obtener el resultado deseado (scale group to 70,70).
¿Es posible escalar el grupo con la transformación maxtrix o existe de otra manera?

Answer 1

Puede usar la función getBBox() para recuperar el tamaño actual de los gráficos y luego usar el ancho y alto para calcular el factor de escala que se debe aplicar a los gráficos para ajustarlos al tamaño deseado.

En el siguiente ejemplo los gráficos en el grupo G1 se escala para caber en un rectange con una anchura y altura se establece en 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>