Question

在以下文件中：

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

我正在尝试获取根 SVGSVGElement 的 width 值：

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 。

我需要此值来调整脚本中的某些元素，但它们在Firefox中不起作用。我怎样才能获得宽度的实际值？

Answer 1

从Firefox 33开始，您将能够使用getBoundingClientRect来获取所需的宽度/高度。 Firefox 33将于2014年10月14日发布，但如果您愿意，可以立即尝试nightly。

Answer 2

2年后，这仍然是一个问题..

我找到了一个临时解决方案：

var style = window.getComputedStyle(svg,null);
var svgWidth = style.getPropertyValue("width").slice(0, -2);  // "1240px" -> "1240"

但在我的情况下，这是非常昂贵的，浏览器变得非常慢.. 那么，有没有人有更好的解决方案？

我还尝试将“魔法1”转换为本文后面的像素宽度： https://developer.mozilla.org/en/docs/Web/API/SVGLength 但也没有运气..

Answer 3

这是我通过跨浏览器提供一致值的方式：

这是我修复它的方式：

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中的SVGSVGElement宽度错误

3 个答案: