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?
});

Jsfiddle

Answer 1

罗伯特的答案已经涵盖了如何解决问题，但此外还有D3的做法。特别是，您可以使用d3.transform()来解析transform属性的值：

var t = d3.transform(d3.select(this).attr("transform"));
console.log(t.translate);

更新了jsfiddle here;

Answer 2

您可以使用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 =在这种情况下转换。

This在Firefox上为我提醒50,50。

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

2 个答案: