Firefox中错误的SVGSVGElement宽度 [英] Wrong SVGSVGElement width in Firefox
问题描述
在下面的文档中:
<?xml version =1.0encoding = UTF-8standalone =no?>
<!DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.0 // ENhttp://www.w3.org/TR/SVG/DTD/svg10.dtd\">
< svg width =100%
height =100%
id =pic
version =1.1
style =background-color:blue
xml:space =preserve
xmlns =http://www.w3.org/2000/svg
xmlns:ev =http ://www.w3.org/2001/xml-events
xmlns:xlink =http://www.w3.org/1999/xlink>
< / svg>
我试图获取根值> SVGSVGElement :
$ b
document.getElementById(pic)。width.baseVal .value
Chromium说:969
Firefox说: 1
肯定值也许有一些实现依赖,但是(当然我必须是独立的)当我尝试获得一个转换后的值:
var w = evt.target.width.baseVal;
w.convertToSpecifiedUnits(5);
alert(w.valueInSpecifiedUnits);
chrome再次提供969,但Firefox的答案是 1 。 p>
我需要这个值来调整脚本中的某些元素,但是它们在Firefox中不起作用。
如何获得宽度的实际值?
跨浏览器:
这是我固定它的方式:
var heightComponents = ['height','paddingTop','paddingBottom','borderTopWidth','borderBottomWidth'],
widthComponents = ['width','paddingLeft','paddingRight','borderLeftWidth',' borderRightWidth'];
$ b $ var svgCalculateSize = function(el){
var gCS = window.getComputedStyle(el),//使用gCS,因为IE8-不支持svg
bounds = {
width:0,
height:0
};
heightComponents.forEach(function(css){
bounds.height + = parseFloat(gCS [css]);
});
widthComponents.forEach(function(css){
bounds.width + = parseFloat(gCS [css]);
});
返回界限;
};
不是很漂亮,但是可以。
On th following document:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width = "100%"
height = "100%"
id="pic"
version="1.1"
style="background-color:blue"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
I'm trying to get the width value of the root SVGSVGElement:
document.getElementById ("pic").width.baseVal.value
Chromium says: 969
Firefox says: 1
Sure value maybe a little implementation dependent, but (what indeed must be independent) when i try to get a converted value:
var w = evt.target.width.baseVal;
w.convertToSpecifiedUnits (5);
alert(w.valueInSpecifiedUnits);
chrome gives again 969, but Firefox' answer is 1.
I need this value to adjust some elements in my scripts, but they don't work in Firefox. How can i obtain the real value of width?
This is the way I got it to give consistent values cross-browser:
This was the way I fixed it:
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;
};
Not very pretty, but works.
这篇关于Firefox中错误的SVGSVGElement宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!