文章标签

使用 SVG 和文本裁剪动画化文本块

我在设计师通讯中偶然发现了这个简洁的小动画。~~不幸的是，我忘记了来源，如果您认出来，请告诉我！~~ 它出自 Martí Fenosa。

在动画中，一段文本出现……

Zach Saucier 发表于 2020 年 4 月 6 日

滤镜 SVG svg 滤镜

悬停时更改 SVG 填充的多种方法（以及何时使用它们）

SVG 是一种非常适合图标的格式。矢量格式无论大小或设备，都清晰锐利——并且在内联使用它们时，我们拥有大量的设计控制权。

SVG 还为我们提供了另一个强大的功能：…

Cassie Evans 发表于 2019 年 2 月 1 日

react SVG svg 图标

为 React 应用创建 SVG 图标库

Nicolas Gallagher

在 Twitter，我使用了此处描述的方法，以多种不同的格式发布公司的 SVG 图标库：优化的 SVG、纯 JavaScript 模块、React DOM 组件和 React Native 组件。

没有唯一正确的方法^©…

Chris Coyier 发表于 2018 年 12 月 14 日

图标系统图标 SVG svg 图标

使用内联精灵图创建可访问的 SVG 图标

这是 Marco Hengstenberg 对可访问的 SVG 标记模式的一个很好的概述。以下是理想的示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

…

Chris Coyier 发表于 2018 年 12 月 7 日