使用自定义 SVG 图像为 Discourse 启动画面添加品牌标识

非常像爬行动物!

添加一个逆时针旋转约 60 度,绕 y 轴旋转 180 度的,你就得到了一个复活的眼睛
添加一个绕 y 轴旋转的镜像,这样就有两个图像(眼睛)

去 Discourse a rex
没错,脑子里挥之不去,肯定需要多出去走走

2 个赞

我在这里设置了一个独轮车加载器!https://unicyclist.com
真棒!

原始动画是我用纯 CSS 制作的,我让 Gemini 将其(可以这么说)转换为 SVG。

10 个赞

https://unicyclist.com 的加载屏幕上,加载条似乎超出了背景范围。

1 个赞

谢谢。一位用户报告了这个问题。有一些 SVG 的怪癖(?)使得图片在帖子中显示……很奇怪,但在加载屏幕上却不会。

例如,这个旧版本:

在这里看起来完全是坏的,即使我们点击它(它显示一个双重加载条……)。
但用作启动画面时看起来是好的。

我盲目地让 Gemini “修复它”,它创建了我发布的 SVG 看起来还可以,但显然某些用户在进度条方面有问题。我猜这就是您看到的情况:

我在 Windows Chrome/Firefox 或 Android/Chrome 上没有遇到任何问题。

我不知道 Discourse 与这些故障之间是否存在任何关联。

所以,为了保持主题,除了非 CSS 动画之外,当我们想为启动画面使用动画 SVG 时,还有哪些需要注意的事项?

2 个赞

我使用 SVG 中的 clipPath 来防止元素溢出。
也许可以这样指导 Gemini:

此 SVG 中的加载条超出了背景范围。请修改它,以确保它保持在背景范围内,使用 clipPath。
4 个赞

感谢这个功能,我也试了一下,虽然还不完全满意,但我正在修复中 :smiley:

10 个赞

大小无法自定义

新的 Gemini 3.5 Flash 在这方面甚至更出色

13 个赞

我已单独开启了一个相关的草案实现,但更广泛的构想仅仅是该功能的一个可能后续方案:

目前针对大多数站点而言,采用单个 SVG 配合 var(--primary)var(--secondary)var(--tertiary) 的方式仍然是最简洁、最清晰的方案,尤其是当同一 SVG 仅需调整颜色时。

我所探讨的使用场景是一种边缘情况:即深色模式下的启动画面需要完全不同的资源或视觉处理,而不仅仅是重新着色同一 SVG。例如,已登录状态的深色页眉可能最适合采用一种透明的标志/背景处理方式,而匿名登录或启动画面视图则可能需要稍有不同的炭灰色背景或调整后的 SVG,以获得更好的对比度。

因此,这一构想并非要取代当前基于变量的方案,而是为那些深色启动画面确实需要与浅色/默认启动画面有所不同的站点提供一个“逃生通道”。

欢迎反馈:这是否应作为一个独立的 splash_screen_image_dark 设置,还是应继续将现有的“单个 SVG + 颜色变量”方案作为唯一支持的途径。

1 个赞