如何在 Framer 中使用轮廓化 SVG 文本

Framer 拥有相当不错的排版支持。你可以加载系统字体、使用 Google Fonts，甚至引入可变字体 (Variable Fonts)。那么，为什么还会有人想要引入轮廓化 (outlined) 的 SVG 文本呢？

原因在于：对于某些特定类别的文本效果，Framer 的原生动态文本图层处理起来非常吃力——如果你曾经碰到过这堵“墙”，你肯定知道我在说什么。

---

Framer 中动态文本的局限性 (针对特定用例)

Framer 的文本图层非常适合用于正文、标题和 UI 标签。但在以下几个特定场景中，它们就显得力不从心了：

跨越多个字母的全局渐变填充
Framer 允许你给 Frame (框架) 应用渐变，但是如果想给文本图层应用“逐字跨越”的全局渐变——即那种像水流一样连续贯穿整个单词的渐变效果——你必须使用 SVG。如果不依赖各种变通方法 (workarounds)，原生动态文本是无法做到的。

仅描边文字 (空心文本)
想要制作只有外轮廓、没有填充颜色的文字？动态文本不支持“仅描边”选项。而在 SVG 路径中，你只需要将 fill 设为 none，然后随意设置 stroke 即可。

图片填充文字 (裁剪遮罩效果)
“文字内部透出图片”是现代网页设计中非常常见的视觉效果。在 Framer 中，用动态文本去实现这种效果非常脆弱，甚至会因为版本更新而失效。但如果使用 SVG 路径搭配 <clipPath>，效果就非常稳定且可预测。

无法在 Framer 中加载的字体
Framer 默认加载 Google Fonts，也允许你上传自定义字体——但如果你使用的是有严格授权、无法上传的商用字体，保持设计的唯一干净办法，就是在导入 Framer 之前将文本轮廓化。

把文本作为设计元素，而不是文案
当一个单词是图形的一部分时——比如 Hero 区域的插图、装饰性背景元素或水印——把它当成动态文本处理会增加不必要的脆弱性。路径就是纯粹的几何图形，它永远不会变形。

---

什么时候应该保持为动态文本？

这一点非常重要：不要把所有东西都轮廓化。 如果你的文本属于以下情况：

• 可能会修改的页面标题或段落
• 需要本地化的文案（不同语言 = 不同的长度）
• 需要被屏幕阅读器解析的内容
• 绑定了 CMS (内容管理系统) 的组件

...请保留为动态文本。轮廓化的 SVG 文本对屏幕阅读器是隐形的，也无法被搜索引擎检索。对于需要被阅读的信息内容来说，这是无法承受的无障碍访问 (Accessibility) 和 SEO 代价。

核心原则：只将装饰性或排版极其复杂的文本轮廓化。所有提供信息的文本都应保留为动态文本。

---

如何生成轮廓化的 SVG

前往 texttosvg.app。输入你的文本，选择字体。在导出之前，针对 Framer 调整以下几个设置：

Bezier Accuracy (贝塞尔曲线精度)
设置为“中 (medium)”。对于屏幕显示来说，高精度会产生过多不必要的锚点——这在网页端是大材小用，还会让 SVG 文件变得稍微臃肿。中等精度能提供平滑的曲线且不会增加不必要的复杂性。

Separate Characters (分离字符：取决于你的需求)

• 关闭 (Off) (默认)：整个单词将作为一个路径或复合路径导出。作为单一元素在 Framer 中更容易定位。
• 开启 (On)：每个字母都将成为独立的路径。如果你想在 Framer 的动画系统里对字母进行独立动画，或者为每个字符错开入场时间 (stagger)，请使用这个选项。

Units (单位)
网页项目请选择 px。Framer 在像素环境下工作——如果在粘贴 SVG 时使用了 mm 或 inch，会导致缩放混乱。

Fill Color (填充颜色)
如果你想把默认颜色直接烘焙到 SVG 里，可以在工具中设置。或者将其保留为黑色，导入后直接在 Framer UI 的 Fill (填充) 面板中进行覆盖。

点击 Download SVG (下载 SVG)。

---

将 SVG 导入 Framer

有两种将 SVG 引入 Framer 的方式，它们的行为截然不同：

方法 1：作为 SVG 代码粘贴 (推荐，支持后期编辑)

用代码编辑器打开下载好的 .svg 文件。复制里面所有的原生 SVG 代码。切回 Framer 画布，按 Cmd+V (Mac) 或 Ctrl+V (Windows)。Framer 会将其粘贴为带有可编辑属性的原生 SVG 元素。

这种方法保留了在 Framer 内部编辑路径的能力。你可以选择单个路径、更改填充颜色，并为它们添加动画。

方法 2：作为图片资源导入

将 .svg 文件拖入 Framer 的 Assets (资源) 面板。然后像插入图片一样把它放到画布上。这种方法更快，但它会将 SVG 视为扁平资产 (flat asset)——你将失去对单个路径的控制，也无法通过 Framer UI 覆盖填充颜色。

当你需要对 SVG 进行样式调整或添加动画时，请使用方法 1。当你只需要一个静态的视觉元素时，请使用方法 2。

---

在 Framer 中为轮廓 SVG 设置样式和动画

一旦作为 SVG 元素粘贴进去，你就可以进行以下操作：

改变填充颜色
选中 SVG 元素，去右侧面板找到 Fill (填充)。应用纯色、渐变或图片填充。这会直接覆盖 SVG 代码中原本设置的颜色。

应用全局渐变
选中元素 → Fill (填充) → Gradient (渐变)。因为现在这个单词是一个单一路径（前提是你关闭了“分离字符”），渐变会作为一个连续的水流覆盖整个形状，而不是一个字母一个字母地渲染。这正是原生动态文本几乎无法实现的惊艳效果。

使用 Framer Motion 添加动画
在 Framer 内置的动画控件中，你可以像对待其他 Frame 一样为 SVG 元素设置入场动画——淡入 (fade)、滑动 (slide)、缩放 (scale)。如果你在导出时开启了“分离字符”，每个字母都会成为独立的元素，可以在时间轴上分别错开出现。

作为裁剪遮罩 (Clip mask) 使用
在 Framer 中，将一张图片图层放置在你的 SVG 文本后方。同时选中这两个图层，右键 → Mask (遮罩)。图片就会透过字母的形状显示出来。因为路径本身就是定义明确的几何图形，所以这种做法非常干净且效果可预测。

---

检查是否导入成功

粘贴完成后，做个快速检查：

1. 放大到 400% — 字母边缘应该保持绝对的锐利。如果边缘模糊，说明它在某个环节被栅格化了——正确的 SVG 不应该出现这种情况。
2. 调整元素大小 — 拖动角落的控制柄，看看它是否能无损缩放。SVG 路径可以无限缩放；如果你看到了像素点，说明导入过程出错了。
3. 点击进入元素内部 — 你应该能够选中独立的路径。如果整个文本像一个被锁定的编组一样操作，你可能是意外地把它作为图片资源导入了。请使用方法 1重新粘贴。
4. 在浏览器中预览 — Framer 画布的渲染和实际浏览器的渲染很接近，但并非完全相同。点击 Preview (预览) 或发布到测试链接，在不同屏幕尺寸下检查文本。轮廓化的 SVG 文本在所有分辨率下看起来都应该完全一致。

---

实际案例：Hero 区域的渐变大字 (Wordmark)

这里有一个结合了上述所有技巧的经典用例：

在一个落地页的 Hero 区域有一个巨大的文字商标 (wordmark)，你希望为它填充对角线渐变，且颜色要从左到右平滑地贯穿整个单词——不是每个字母独立渐变，而是整个单词共享一个色彩流。

1. 在 texttosvg.app 输入品牌名称，选择品牌字体，将 Bezier Accuracy (曲线精度) 设为 medium，关闭 Separate Characters (分离字符)，单位设为 px。
2. 下载 SVG，在代码编辑器中打开并复制代码。
3. 粘贴到 Framer 画布中 (Cmd+V / Ctrl+V)。
4. 选中元素 → Fill (填充) → Gradient (渐变) → 设置角度和颜色。
5. 添加一个入场动画：从 95% 缩放至 100% 加上淡入 (fade)，持续 0.6 秒，缓动 (ease-out)。

总耗时：大约三分钟。如果用动态文本去伪造这种渐变效果，不仅要花费大量时间，而且很可能会在下一次 Framer 更新时彻底崩溃。

---

总结

使用场景	动态文本 (Live Text)	轮廓化 SVG
正文 / 段落标题	✅	—
绑定 CMS 的文本	✅	—
跨越整个单词的渐变	—	✅
仅描边 (空心) 文本	—	✅
图片填充的文字遮罩	—	✅
Framer 中无法加载的字体	—	✅
逐字入场动画	需依赖 Framer 插件	✅ (需开启分离字符)
对屏幕阅读器友好	✅	—

轮廓化的 SVG 文本并不是要取代 Framer 的动态文本系统。它更像是一把“手术刀”，专门用来解决动态文本确实无法胜任的设计需求。分清这两者的界限，你就能把时间花在刀刃上，而不是在各种奇技淫巧 (workarounds) 中挣扎。