如何从组中获取翻译属性？

Question

我有许多 svg 组，每个组中都有许多子项。

如果发生这种情况，click我group想将我所有的团体和他们的孩子一起搬走。我想知道translate它的属性clicked组的属性，以便我可以移动其他组。

我试图获得该translate财产，但未能获得。

这是我尝试过的：

var svg = d3.select('body').append('svg').attr({width:300,height:300});    
var group = svg.append('svg:g').attr({
    'width':100,
    'height':100,
    'transform' : 'translate(50, 50)'
});

group.append('circle').attr({'r':30});

group.on('click', function () {
    console.log(this); //how to get the translated properties?
});

杰斯小提琴

Answer 1

您可以使用 getAttribute 例如

this.getAttribute("transform")

或SVG DOM

this.transform.baseVal.getItem(0).matrix.e + ", " + this.transform.baseVal.getItem(0).matrix.f)

baseVal.numberOfItems 获取转换有多少个组件，getItem(0).type获取其类型，即本例中 2 = 转换。

在 Firefox 上，这会提醒我 50、50。