javascript - 无法在 Firefox 中获取 SVG 元素的转换属性

Question

我有一个带有click事件的 SVG 元素（一个 d3.js 图表）。单击时，我们需要获取focus 元素的位置，然后使用此信息做一些事情。

var focus = g.append("g")
    .attr("class", "focus")
    .style("display", "none");

svg.on("click", function() {
    var focus_el = document.getElementsByClassName('focus')[0];
    var style = window.getComputedStyle(focus_el);
    console.log(focus_el);
    console.log(style.transform);
});

在 Chrome 中，控制台显示：

<g class="focus" transform="translate(7,384)" style="display: block;">...</g>
matrix(1, 0, 0, 1, 181, 357)

在 Firefox 中，控制台显示：

<g class="focus" transform="translate(7,384)" style="display: block;">...</g>
none

因此，即使transform在这两种情况下都存在内联样式，并且在这两种情况下display都设置为block，Firefox 也无法transform在对象中找到该属性style。

如果我尝试直接获取转换属性 ( focus_el.transform)，与该方法相比，我会得到不同的结果style.transform。

输出console.log(focus_el.transform)：

SVGAnimatedTransformList {
    animVal: SVGTransformList [
        SVGTransform {
            angle: 0,
            matrix: SVGMatrix {
                a: 1, b: 0, c: 0, d: 1, e: 31, f: 382
            },
            type: 2
        }
    ],
    baseVal: SVGAnimatedTransformList [
        SVGTransform {
            angle: 0,
            matrix: SVGMatrix {
                a: 1, b: 0, c: 0, d: 1, e: 31, f: 382
            },
            type: 2
        }
    ]
}

输出console.log(style.transform)：

matrix(1, 0, 0, 1, 193, 345)

标签： javascriptcsssvgd3.js