获取 svg
元素尺寸的正确方法是什么?
http://jsfiddle.net/langdonx/Xkv3X/
铬 28:
style x
client 300x100
offset 300x100
IE 10:
stylex
client300x100
offsetundefinedxundefined
火狐 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;
}
使用 getBBox
函数:
SVGGraphicsElement.getBBox() 方法允许我们确定对象适合的最小矩形的坐标。 [...]
var bBox = svg1.getBBox();
console.log('XxY', bBox.x + 'x' + bBox.y);
console.log('size', bBox.width + 'x' + bBox.height);
FireFox 对 getBBox() 有问题,我需要在 vanillaJS 中执行此操作。
我有更好的方法,结果与真正的 svg.getBBox() 函数相同!
有了这个好帖子:Get the real size of a SVG/G element
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);
我正在使用 Firefox,我的工作解决方案非常接近 obysky。唯一的区别是您在 svg 元素中调用的方法将返回多个矩形,您需要选择第一个。
var chart = document.getElementsByClassName("chart")[0];
var width = chart.getClientRects()[0].width;
var height = chart.getClientRects()[0].height;
transform
之前获取大小的方法。
SVG 具有属性 width
和 height
。它们返回具有两个属性的对象 SVGAnimatedLength
:animVal
和 baseVal
。此接口用于动画,其中 baseVal
是 before 动画的值。据我所知,这个方法在 Chrome 和 Firefox 中返回一致的值,所以我认为它也可以用来计算 SVG 的大小。
这是我发现的一致的跨浏览器方式:
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;
};
从 Firefox 33 起,您可以调用 getBoundingClientRect() 并且它会正常工作,即在上面的问题中它将返回 300 x 100。
Firefox 33 将于 2014 年 10 月 14 日发布,但如果您想试用,此修复程序已在 Firefox nightlies 中。
使用 .getAttribute()!
var height = document.getElementById('rect').getAttribute("height"); var width = document.getElementById('rect').getAttribute("width"); var x = document.getElementById('rect').getAttribute("x"); alert("高度:"+高度+",宽度:"+宽度+",x:"+x);
确定任何元素的宽度和高度单位(无填充,无边距)的保存方法如下:
let div = document.querySelector("div");
let style = getComputedStyle(div);
let width = parseFloat(style.width.replace("px", ""));
let height = parseFloat(style.height.replace("px", ""));
不定期副业成功案例分享
svg
元素占用的实际大小,尽管已绘制了什么? jsfiddle.net/Xkv3X/4