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

非常像爬行动物!

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

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

2 个赞

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

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

8 个赞

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

1 个赞

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

例如,这个旧版本:

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

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

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

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

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

2 个赞

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

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

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

8 个赞