SVG 跑马灯文字生成器

x-init="restore()" >

将简单的滚动文字横幅创建为独立 SVG 文件。此工具在浏览器中本地生成文件,将输入文字重复两次并从右向左移动。它只支持文字,不导入徽标、图像、自定义字体或透明背景。

创建动画 SVG 文字横幅

  1. 1

    输入横幅文字

    输入要滚动的消息。生成的 SVG 会将这段文字重复两次。

  2. 2

    设置动画时长

    选择 3 到 40 秒。文字始终从右向左移动。

  3. 3

    调整画布

    选择 300 到 1,600 px 的宽度、40 到 200 px 的高度以及 14 到 80 px 的字号。

  4. 4

    选择颜色并导出

    选择文字和背景颜色,然后复制 SVG 代码或下载 marquee.svg。

导出的 SVG 包含什么

下载的是单个 SVG 文件。其中包含使用 Inter, Arial, sans-serif 字体栈的粗体文字、两份相邻的输入文字、一个纯色背景矩形和 SVG <animate> 元素。动画会把文字从右边缘移动到左侧并无限重复。导出的文件不含 JavaScript 或外部资源。

兼容性与限制

不同 SVG 查看器和平台处理动画的方式并不相同。浏览器可能会播放横幅动画,但邮件客户端、文档编辑器或内容过滤器可能只显示静态文字,删除 SVG,或删除其动画。请在实际使用的位置测试文件。

此编辑器使用固定的从右向左运动、固定的粗体字体栈和纯色选择器。它不能放置图像或徽标,不能选择字体家族或字重,不能添加无障碍元数据,也不能保证所有文字长度都有无缝循环。

隐私

文字和设置均在浏览器中本地生成。在两步编辑过程中,它们只保存在当前标签页的会话存储中以便进入下一步,不会发送到我们的服务器,也不会写入网址。使用重新开始或关闭标签页即可清除保存的数据。

常见问题

不需要。文件包含 SVG 动画元素,而不是 JavaScript。动画是否播放取决于查看器或平台。

此编辑器不支持。文字始终从右向左移动。

不会。预览、复制和下载都在浏览器中创建。步骤之间只有会话设置保留在标签页中。

相关工具

此工具还提供其他语言版本