如何在svg圈的中心设置图像?

时间:2022-04-01 07:50:40

I have been created dynamic rotation in svg.

我已经在svg中创建了动态旋转。

Here is my working jsfiddle: http://jsfiddle.net/y1oezxoa/

这是我工作的jsfiddle:http://jsfiddle.net/y1oezxoa/

Now, may i know, is there possible to set image in center of my rotating circle.

现在,我可以知道,是否有可能将图像设置在旋转圆的中心。

And may i know, what is the procedure to change the direction of text in each section?

我可以知道,改变每个部分的文字方向的程序是什么?

Can anybody help me? Thanks in advance.

有谁能够帮助我?提前致谢。

My sample text align like this http://s1.postimg.org/if325n2yn/Untitled_2.png

我的示例文本对齐如http://s1.postimg.org/if325n2yn/Untitled_2.png

1 个解决方案

#1


1  

1) You can create a separate <img> that you position over the svg (using CSS' z-index, position, left and top properties) Example: jsfiddle.net/PhilQ/y1oezxoa/1

1)您可以创建一个单独的如何在svg圈的中心设置图像?,它位于svg上(使用CSS'z-index,position,left和top属性)示例:jsfiddle.net/PhilQ/y1oezxoa/1

2) I'm not sure if there's a better/faster way, but you can create animations for the text-nodes inside the triangles with a CSS transform that rotates the text 180 degrees at the top half of the circle, and rotates back at the bottom half. (Since you already know the timing of the spinning animation.)

2)我不确定是否有更好/更快的方法,但是您可以使用CSS转换为三角形内的文本节点创建动画,该转换将文本在圆圈的上半部分旋转180度,然后旋转回来下半部分。 (因为你已经知道旋转动画的时间。)

#1


1  

1) You can create a separate <img> that you position over the svg (using CSS' z-index, position, left and top properties) Example: jsfiddle.net/PhilQ/y1oezxoa/1

1)您可以创建一个单独的如何在svg圈的中心设置图像?,它位于svg上(使用CSS'z-index,position,left和top属性)示例:jsfiddle.net/PhilQ/y1oezxoa/1

2) I'm not sure if there's a better/faster way, but you can create animations for the text-nodes inside the triangles with a CSS transform that rotates the text 180 degrees at the top half of the circle, and rotates back at the bottom half. (Since you already know the timing of the spinning animation.)

2)我不确定是否有更好/更快的方法,但是您可以使用CSS转换为三角形内的文本节点创建动画,该转换将文本在圆圈的上半部分旋转180度,然后旋转回来下半部分。 (因为你已经知道旋转动画的时间。)