Javascript 围绕轴点旋转SVG中的泪滴形状

我试图在带有SVG图标的单张地图上显示一组气象站。现在我只是想弄清楚绘图部分

图标为撕裂状，应根据风向围绕图标的“圆形”部分旋转

我很难弄清楚如何设置

变换

和

变换原点

，使其图标“保持原位”并围绕路径中的“圆”旋转

在下面的例子中，数字应该保持在圆的中间。

var svg=d3.选择（“#图标svg”）；
//这实际上是根据风向动态完成的
var d=0；
var path=svg.select（'path'）；
//动画旋转只是为了使示例易于验证。
函数rotate（）{
d=（d+15<360）？d+15:0；
路径样式（'transform'，'rotate（'+d+'deg'）；
设置超时（旋转，60）；
};
旋转（）
svg{
溢出：可见；
背景色：#ffedfd
}
.站点图标路径{
/**我应该在这里用什么**/
变换原点：中心40%；
}

6.
将原点设置为60%是否达到了您想要的效果


var svg=d3.选择（“#图标svg”）；
//这实际上是根据风向动态完成的
var d=0；
var path=svg.select（'path'）；
函数rotate（）{
d=（d+15<360）？d+15:0；
路径样式（'transform'，'rotate（'+d+'deg'）；
设置超时（旋转，60）；
};
旋转（）
svg{
溢出：可见；
背景色：#ffedfd
}
.站点图标路径{
/**我应该在这里用什么**/
变换原点：中心60%；
}

6.
不使用变换原点的另一种方法是设置旋转中心（此处使用幻数）：


var svg=d3.选择（“#图标svg”）；
//这实际上是根据风向动态完成的
var d=0；
var path=svg.select（'path'）；
//动画旋转只是为了使示例易于验证。
函数rotate（）{
d=（d+15<360）？d+15:0；
attr（'transform'，'rotate（'d+'13 19'）；
设置超时（旋转，60）；
};
旋转（）
svg{
溢出：可见；
背景色：#ffedfd
}

6.
为什么这是一个答案？你有没有试过运行这个片段？
path.attr('transform', 'rotate('+d+' 13 19)');