W jaki sposób mogę przeskalować grupę graficzną svg do pożądanego rozmiaru (nie przez współczynnik)?

Question

Mam grupę graficzną svg (mam na myśli ścieżki, rekatangles itp.). Chcę przeskalować grupę do pewnej wielkości, na przykład do 70,70. Wiem, że svg zapewnia transformację skali, ale skalowalność wymaga skalowania, którego nie wiem, ponieważ grupa może mieć wiele kształtów i nie jest łatwo określić rozmiar graniczny całej grupy.
Grałem z parametrem viewBox parametru svg elemenent i preserveAspectRatio, ale nie mogłem uzyskać pożądanego wyniku (grupa skali do 70,70).
Może jest możliwe skalowanie grupy z transformacją maxtrix lub istnieje w inny sposób?

Answer 1

Możesz użyć funkcji getBBox(), aby pobrać bieżący rozmiar grafiki, a następnie użyć szerokości i wysokości, aby obliczyć współczynnik skali, który należy zastosować do grafiki, aby dopasować go do żądanego rozmiaru.

W poniższym przykładzie grafiki w grupie g1 jest skalowany w rectange o szerokości i wysokości ustawionej na 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>