Làm thế nào để thay đổi đối số của svg <g transform = scale (X)> bằng JavaScript?

Question

Hey.
Giả sử một nơi nào đó trên trang của tôi có đồ họa SVG. Có một nhóm mà tôi muốn quy mô lại khi một số sự kiện được kích hoạt. Làm thế nào để làm điều đó?
mã ví dụ:

<svg onresize="getDivSize(evt)"> 
    <g transform=scale(13)> 
     <rect id="Square" class="chart" 
      width="80" height="20" 
      fill="black" 
      stroke-width="0px" 
      rx="8" ry="8" /> 
     <text id="TextElement" x="13" y="15" fill="green">Text</text> 
    </g> 
</svg> 

Tôi muốn thay đổi quy mô (13) lập luận, để làm những gì phải ở trong chức năng getScreenSize (evt) {...}?
Hoặc cách đạt được hiệu quả tương tự theo cách khác?

chỉnh sửa
Đối với ý tưởng chung, tôi muốn đổi kích thước đồ họa mà không chỉ định giá trị cố định ở bất kỳ đâu. Vì vậy, kích thước divs của tôi là tỷ lệ phần trăm dựa, bây giờ tôi chỉ muốn đồ họa của tôi để chính xác phù hợp với div của tôi bất kể kích thước của nó. Đó là lý do tại sao tôi nghĩ về JS thay đổi scale() đối số bất cứ khi nào sự kiện được kích hoạt (div resize). Chức năng sẽ đưa vào tính toán đối số quy mô của DivSize/rectBaseSize (x hoặc y).

Answer 1

Thêm một thuộc tính id vào <g> và sau đó thử này:

document.getElementById("id_of_g_element").transform.baseVal.getItem(0).setScale(new_scalex,newscale_y); 

hoặc cách khác:

document.getElementById("id_of_g_element").setAttribute("transform", "scale(" + new_scalex + "," + new_scaley + ")"); 

Mặt khác, tại sao bạn không chỉ cần sử dụng một viewBox để có Nội dung svg được tự động thay đổi kích thước? Hoặc có những ràng buộc cụ thể về những gì nên được hiển thị? Cũng có thể thực hiện một số điều đó với các giải pháp không theo kịch bản dựa trên các truy vấn phương tiện CSS3, xem http://www.youtube.com/watch?v=YAK5el8Uvrg (đừng quên kiểm tra mô tả cho các liên kết đến các tệp demo được hiển thị trong bản trình bày đó).

Answer 2

Nếu bạn 'chỉ' muốn tập tin SVG lên để mở rộng kích thước của một DIV, bạn có thể làm điều đó với CSS

#stretched-image { 
    margin: 0; 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
    height:100%; 
    background-size:cover; 
    display: block; 
    background-position:50% 50%; 
    background-image: url(../img/pic.svg); 
}