SVG：父变换上的反向子旋转答案

【问题标题】：SVG: reverse children rotation on parent transformSVG：父变换上的反向子旋转
【发布时间】：2015-12-31 15:03:16
【问题描述】：

我在 plunker 中摆弄 D3.js。它主要做我想要的，但我注意到一个小的不一致。

这个想法是第二个滑块旋转容器中的 SVG 元素。由于其中的元素实际上是text 元素，我想让它们显示未旋转，因此，我使用滑块的对称值对它们应用了transform: rotate。

虽然，我注意到通过这样做，text 元素不会围绕它们的中心旋转，而是围绕它们的 左上角 角（我认为）。当您观察边缘附近的一个点并查看如何在旋转时转置边缘时，这主要是可见的。

我已经尝试在这些元素上将text-anchor 和alignment-baseline 设置为middle，希望它会抵消text 路径，但显然它不会改变旋转时它们围绕的点。

此外，如果我尝试使用枢轴点坐标设置rotate，它会通过将一些translate 应用到我无法弄清楚的元素来完全混淆效果。

不确定getBBox() 是否可以帮助我解决这个问题，但我考虑过可能将这些点偏移其宽度/高度的一半。不过，这似乎有点令人费解，我希望有一个更简单/更优雅/更干净的修复。

有什么想法吗？

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

嗯，这很尴尬。在我发布问题后，我在 D3.js 文档中找到了答案：polygon.centroid()。

基本上，我将此函数的返回值用作transform: rotate 枢轴点坐标，并处理了偏移量。示例（上述 plunker 的第 99 行，rotate() 函数）：

(...)
var textElement = d3.select(this);
return justTranslate+"rotate("+ -value+ textElement.centroid() +")";
(...)

希望这对遇到同样问题的人有所帮助。

编辑：出于某种原因，Chrome 的控制台说：

未捕获的类型错误：textElement.centroid 不是函数

但行为正是我想要的。不知道为什么。

EDIT2：最终将上述答案更改为getBBox() 方法，因为之前的编辑错误导致滑块移动失败。

改成这样：

text.attr("transform", function(d){
    var textElement = d3.select(this);
    var current = textElement.attr("transform");
    var alreadyRotated = current.indexOf('rotate');
    var justTranslate = current.substring(0, alreadyRotated != -1 ? alreadyRotated : current.length);
    var bbox = textElement.node().getBBox();
    var point = [bbox.x + 0.5*bbox.width, bbox.y + 0.5*bbox.height];
    return justTranslate+"rotate("+ -value +" "+ point +")";
});

【讨论】：