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

公告
13

请注意，我们在允许的 SVG 动画方面有了一个细微的改动（我已经更新了 OP 以反映这一点）。最初我们允许 SVG 中的 SMIL 动画，但事实证明这些动画会卡顿，因为浏览器在 JavaScript 执行时会暂停此类动画。

因此，现在的建议是只在 SVG 中使用 CSS transform 和 opacity 动画，因为这些不会被 JS 阻塞。

如果您看一下上面 @ばこん 的 SVG……它提供了一个可允许的动画的好例子：

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

另外，请注意为您的动画指定唯一的名称，以免与 Discourse 中的其他动画冲突（“blink”、“rotate”、“fade”等名称可能过于通用）。使用像 unique- 这样的前缀是避免这种情况的好方法。

4 个赞