Làm thế nào tôi có thể chia tỷ lệ nhóm đồ họa svg thành kích thước mong muốn (không theo yếu tố)?

Question

Tôi có nhóm đồ họa svg (ý tôi là đường dẫn, kết nối lại, v.v.). Tôi muốn chia tỷ lệ nhóm thành một kích thước nhất định, để được xem là 70,70. Tôi biết rằng svg cung cấp quy mô chuyển đổi, nhưng quy mô chuyển đổi cần yếu tố quy mô mà tôi không biết vì nhóm có thể có nhiều hình dạng và nó không dễ dàng để xác định kích thước giới hạn của cả nhóm.
Tôi đã chơi với tham số viewBox của tham số svg elemenent và retainAspectRatio nhưng tôi không thể nhận được kết quả mong muốn (nhóm tỷ lệ đến 70,70).
Có thể quy mô nhóm với biến đổi maxtrix hoặc tồn tại theo cách khác?

Answer 1

Bạn có thể sử dụng chức năng getBBox() để truy xuất kích thước hiện tại của đồ họa và sau đó sử dụng chiều rộng và chiều cao để tính hệ số tỷ lệ được áp dụng cho đồ họa để vừa với kích thước mong muốn.

Trong ví dụ dưới đồ họa trong nhóm g1 được thu nhỏ để phù hợp trong một rectange có chiều rộng và chiều cao thiết lập để 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>