এসভিজি উপাদানটির প্রস্থ / উচ্চতা পান

Question 1

কোনও svgউপাদানটির মাত্রা পাওয়ার সঠিক উপায় কী ?

ক্রোম 28:

style x
client 300x100
offset 300x100

আইই 10:

stylex 
client300x100 
offsetundefinedxundefined

ফায়ারফক্স 23:

"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

ফায়ারফক্সের 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

আমি ফায়ারফক্স ব্যবহার করছি, এবং আমার কাজের সমাধানটি অবস্কির খুব কাছে। পার্থক্যটি হ'ল আপনি যে পদ্ধতিটি একটি এসভিজি উপাদানগুলিতে কল করেন সেটি একাধিক আবৃত্তি ফিরে আসবে এবং আপনাকে প্রথমটি নির্বাচন করতে হবে।

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