围绕其中心d3旋转svg路径 [英] Rotate svg path around its centre d3

问题描述

我在插画家中画了一个简单的齿轮.我已经将svg标记放置在索引页面中，一切都很好.我可以通过其ID访问它.

I have a simple cog wheel drawn in illustrator. I've placed the svg markup in the index page and all is well. I can access it by its id.

下面的代码是在该时间段执行的函数的一部分，因此我不必担心时间元素.

The code below is part of a function that is executed on that time period so I don't need to worry about the time element.

我环顾四周，不理解发现的示例.这就是我所拥有的:

I've looked around and am not understanding the examples I've found. This is what I have:

var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(0, 0, 2)');

我想每300毫秒旋转几度.

I want to rotate a couple of degrees every 300 milliseconds.

推荐答案

您的原始代码似乎没有什么功能(不需要使用逗号进行旋转).因此，将其删除，您的语句要求svg围绕x，y坐标0、2(从左上角向下2个像素)旋转0度.您想要的东西更接近:

Your original code doesn't seem very functional (the commas in rotate are not needed). So taking those out, your statement is asking the svg to rotate by 0 degrees around the x, y coordinates 0, 2 (2 pixels down from the top-left corner). What you want is closer to:

var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(2 ' + (objectwidth / 2) + ' ' + (objectHeight/2) + ')');

这篇关于围绕其中心d3旋转svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！