2

有许多 JavaScript 片段可以使文本或图形沿着圆形路径移动，其中字母或单词始终直立。

示例：http ://www.dseffects.com/f_scripts.html

我想让文本（或图形）以月球绕地球运行的方式运行一个点，其中一个面始终朝向中心。以下示例显示了这一点，但非常粗略且不使用网络字体。

示例：http: //javaboutique.internet.com/text/Manipulation/TextRotor/

我确信有一种方法可以像第一个示例一样修改轨道代码（只是不在光标周围），以便每个字母/图像保持一侧朝向中心（轴）。

4

1 回答 1

2

SVG 确实是这种事情的出路。我只是很快就完成了这个，但至少它可以作为一个例子。HTML 部分可能会有很大差异，但这是一种方式。

把它放到一个html页面中：

<iframe src="orbitingText.svg" width="100%" height="100%"></iframe>

然后，创建 orbitingText.svg 文件（它只是一个带有 .svg 扩展名的文本文件）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 300">
<defs>
    <path id="textPath" d="M 150 75 a 75 75 0 1 0 0.00001 0"/>
</defs>
<circle cx="150" cy="150" r="40" stroke="blue" stroke-width="1"></circle>
<text fill="red">
    <textPath xlink:href="#textPath" startOffset="0">
        <animate attributeName="startOffset" dur="7s" from="0" to="500" repeatCount="indefinite" />
        Orbiting Text
    </textPath>
</text>

哦，如果您担心跨浏览器兼容性，请查看此站点： http ://code.google.com/p/svgweb/

于 2011-05-19T21:20:19.740 回答