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