SVG 圆分解为路径

Desknumber

本文将向您展示如何将 SVG 圆形转换为可在动画和文本路径中使用的路径，以及如何将路径转换为圆形。一旦你弄清楚了它是如何工作的，你将能够实现一些非常实际的效果。让我们深入研究一下。

本文首先坦白：我喜欢手动编写 SVG 代码。情况并非总是如此，但对于那些不同意我的偏好的人来说，这常常显得很奇怪。能够手动编写 SVG 有很多好处，例如以工具无法做到的方式优化 SVG（将路径变成更简单的路径或形状），或者简单地了解 D3 或 Greensock 等库的工作原理。

话虽如此，我想更仔细地研究 SVG 中的圆形形状，以及当我们经 电子邮件营销列表 过基本圆形时我们可以用它们做的事情。为什么是圆圈？嗯，我喜欢圆圈。它们是我最喜欢的形状。首先（希望您之前在 SVG 中见过基本圆），这里有一支笔显示了一个圆：



请参阅Bryan Rasmussen的笔圈。圆形可以做很多事情：它可以是动画的，并且可以应用不同的颜色。尽管如此，在 SVG 1.1 中，有两件非常好的事情是圆不能做的：您不能使另一个图形元素沿着圆的路径移动（使用该animateMotion元素），并且不能沿着圆的路径塑造文本（这只会SVG 2.0 发布后才允许）。

参加关于前端、设计和用户体验的精彩研讨会，包括实用要点、现场会议、视频录制和友好的问答。与布拉德·弗罗斯特（Brad Frost）、史蒂夫·沃尔特（Stéph Walter）和其他许多人一起。

跳转到研讨会 功能面板将我们的圆圈变成一条路径 有一个在线小工具可以帮助您创建圆圈之外的路径（您可以在此处尝试一下），但我们将从头开始创建所有内容，以便我们可以找出幕后真正发生的事情。

为了制作一条圆形路径，我们实际上要制作两条圆弧，即在一条路径中完成圆的半圆。正如您可能在上面的 SVG 中注意到的，属性CX、CY和R分别定义沿 X 轴和 Y 轴绘制圆的位置，同时R定义圆的半径。和CX创建CY圆的中心，因此围绕该点绘制圆。