Làm cách nào để có chiều rộng của phần tử SVG được chia tỷ lệ với JavaScript?

Question

Nếu tôi có SVG nội tuyến, trong đó có một yếu tố mà đã được mở rộng ...

<g transform="scale(sX,sY)"> 
    <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
</g> 

... hoặc là trong một phần tử <svg> với một thuộc tính viewBox:

<svg viewBox="20 20 5000 1230"> 
    <g transform="scale(sX,sY)"> 
     <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
    </g> 
<svg> 

... làm thế nào tôi có thể lập trình tìm chiều rộng được chia tỷ lệ mới theo pixel là myElement - mà không phát hiện ra quy mô và tính toán theo cách thủ công? Cho đến nay myElement.getBBox().width trả lại 245 mà không cần tính tỷ lệ.

Answer 1

hãy kiểm tra fiddle này http://jsfiddle.net/T723E/. Nhấp vào hình chữ nhật và lưu ý bảng điều khiển firebug. Ở đây tôi có mã hoá cứng một số .3 là chiều rộng 300px của div chứa nút svg/1000 đơn vị người dùng.

Sau khi nhìn thấy tiền thưởng, đây là chức năng tôi có trở lại để có được chiều rộng quy mô mà không nhiều (không có toán học tôi không chắc chắn.) Maths.Use matrix.d cho việc nhân rộng chiều cao

var svg = document.getElementById('svg'); 
    function getTransformedWidth(el){ 
     var matrix = el.getTransformToElement(svg); 
     return matrix.a*el.width.animVal.value; 
    } 

    var ele = document.getElementById('myElement_with_scale') 
    console.log("scale width----", getTransformedWidth(ele)) 

Hãy hãy xem mã này để có mã hoàn chỉnh http://jsfiddle.net/b4KXr/

Answer 2

Bạn đã điều tra tham số bạn có thể sử dụng với getBBox()?

http://raphaeljs.com/reference.html#Element.getBBox