รับความกว้าง / ความสูงขององค์ประกอบ SVG

Question 1

วิธีที่เหมาะสมในการรับขนาดของsvgองค์ประกอบคืออะไร?

Chrome 28:

style x
client 300x100
offset 300x100

IE 10:

stylex 
client300x100 
offsetundefinedxundefined

FireFox 23:

"style" "x"
"client" "0x0"
"offset" "undefinedxundefined"

มีคุณสมบัติความกว้างและความสูงอยู่svg1แต่.width.baseVal.valueจะตั้งค่าได้ก็ต่อเมื่อฉันตั้งค่าแอตทริบิวต์ความกว้างและความสูงบนองค์ประกอบ

ซอมีลักษณะดังนี้:

HTML

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
    <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" />
    <circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" />
</svg>

JS

var svg1 = document.getElementById('svg1');

console.log(svg1);
console.log('style', svg1.style.width + 'x' + svg1.style.height);
console.log('client', svg1.clientWidth + 'x' + svg1.clientHeight);
console.log('offset', svg1.offsetWidth + 'x' + svg1.offsetHeight);

CSS

#svg1 {
    width: 300px;
    height: 100px;
}

Question 2

ใช้ฟังก์ชัน getBBox

http://jsfiddle.net/Xkv3X/1/

var bBox = svg1.getBBox();
console.log('XxY', bBox.x + 'x' + bBox.y);
console.log('size', bBox.width + 'x' + bBox.height);

Question 3

FireFox มีปัญหาสำหรับ getBBox () ฉันต้องทำใน vanillaJS

ฉันมีวิธีที่ดีกว่าและเป็นผลลัพธ์เดียวกันกับฟังก์ชัน svg.getBBox () จริง!

ด้วยโพสต์ดีๆนี้: รับขนาดจริงขององค์ประกอบ SVG / G

var el   = document.getElementById("yourElement"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle

console.log( rect.width );
console.log( rect.height);

Question 4

ฉันใช้ Firefox และโซลูชันการทำงานของฉันใกล้เคียงกับ obysky มาก ข้อแตกต่างเพียงอย่างเดียวคือเมธอดที่คุณเรียกใช้ในองค์ประกอบ svg จะส่งกลับหลาย rects และคุณต้องเลือกอันแรก

var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;

Question 5

SVG มีคุณสมบัติwidthและheight. พวกเขากลับวัตถุSVGAnimatedLengthที่มีสองคุณสมบัติ: และanimVal baseValอินเทอร์เฟซนี้ใช้สำหรับแอนิเมชั่นbaseValค่าก่อนแอนิเมชั่นอยู่ที่ไหน จากสิ่งที่ฉันเห็นวิธีนี้จะคืนค่าที่สอดคล้องกันทั้งใน Chrome และ Firefox ดังนั้นฉันคิดว่ามันสามารถใช้เพื่อคำนวณขนาด SVG ได้ด้วย

Question 6

นี่เป็นวิธีข้ามเบราว์เซอร์ที่สอดคล้องกันที่ฉันพบ:

var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
    widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];

var svgCalculateSize = function (el) {

    var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
        bounds = {
            width: 0,
            height: 0
        };

    heightComponents.forEach(function (css) { 
        bounds.height += parseFloat(gCS[css]);
    });
    widthComponents.forEach(function (css) {
        bounds.width += parseFloat(gCS[css]);
    });
    return bounds;
};

Question 7

ตั้งแต่ Firefox 33 เป็นต้นไปคุณสามารถเรียก getBoundingClientRect () และมันจะทำงานได้ตามปกติกล่าวคือในคำถามด้านบนจะส่งคืน 300 x 100

Firefox 33 จะเปิดตัวในวันที่ 14 ตุลาคม 2014 แต่การแก้ไขนี้มีอยู่แล้วในFirefox nightliesหากคุณต้องการทดลองใช้

Question 8

วิธีบันทึกเพื่อกำหนดหน่วยความกว้างและความสูงขององค์ประกอบใด ๆ (ไม่มีช่องว่างภายในไม่มีขอบ) มีดังต่อไปนี้:

let div   = document.querySelector("div");
let style = getComputedStyle(div);

let width  = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));