SVG तत्व की चौड़ाई / ऊँचाई प्राप्त करें

Question 1

किसी svgतत्व के आयाम प्राप्त करने का उचित तरीका क्या है ?

Chrome 28:

style x
client 300x100
offset 300x100

IE 10:

stylex 
client300x100 
offsetundefinedxundefined

फ़ायरफ़ॉक्स २३:

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

चौड़ाई और ऊँचाई गुण हैं svg1, लेकिन .width.baseVal.valueकेवल तभी सेट किया जाता है जब मैं तत्व पर चौड़ाई और ऊँचाई विशेषताएँ सेट करता हूँ।

फिडल इस तरह दिखता है:

एचटीएमएल

<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>

जे एस

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);

सीएसएस

#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 () के लिए समस्या है, मुझे यह करने की आवश्यकता है।

मेरे पास बेहतर तरीका है और वास्तविक svg.getBBox () फ़ंक्शन के समान परिणाम है!

इस अच्छी पोस्ट के साथ: एसवीजी / जी तत्व का वास्तविक आकार प्राप्त करें

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

मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूं, और मेरा काम करने वाला समाधान ओबेसिटी के बहुत करीब है। अंतर केवल इतना है कि जिस विधि से आप svg तत्व में कॉल करते हैं, वह कई आयतों को लौटा देगी और आपको पहले वाले का चयन करना होगा।

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

Question 5

एसवीजी में गुण widthऔर हैं height। वे SVGAnimatedLengthदो गुणों के साथ एक वस्तु लौटाते हैं: animValऔर baseVal। इस इंटरफ़ेस का उपयोग एनीमेशन के लिए किया जाता है, जहाँ एनीमेशन से पहलेbaseVal मूल्य है । मैं जो देख सकता हूं, यह विधि क्रोम और फ़ायरफ़ॉक्स दोनों में लगातार मूल्यों को वापस लाती है, इसलिए मुझे लगता है कि इसका उपयोग एसवीजी की गणना के आकार को प्राप्त करने के लिए भी किया जा सकता है।

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

फ़ायरफ़ॉक्स 33 के बाद से आप getBoundingClientRect () कॉल कर सकते हैं और यह सामान्य रूप से काम करेगा, अर्थात ऊपर दिए गए प्रश्न में यह 300 x 100 वापस आ जाएगा।

फ़ायरफ़ॉक्स 33 को 14 अक्टूबर 2014 को रिलीज़ किया जाएगा, लेकिन यदि आप इसे आज़माना चाहते हैं, तो फ़ायरफ़ॉक्स नाइटलाइज़ में पहले से ही फिक्स है ।

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", ""));