共计 1402 个字符，预计需要花费 4 分钟才能阅读完成。
前言
上节课我们讲了基本形状转为 path, 转换为 path 之后，就可以用 textpath 做沿路径布局的文字了。如下布局
代码如下：
解释：
viewBox 四个参数是最小 X 轴数值，最小 y 轴数组，宽度，高度
在 defs 元素中定义的图形元素不会直接呈现。
textPath 要指定 href 是那个 path 下面的，即要指定 id
圆形，心形等其他效果一样的。但是必须是 path 路径，基本形状例如上节课的 circle 是不可以的。
圆形布局如下：
动画
offset-path 让元素沿着不规则路径运动
如下代码就可以让小鸟飞起来
![]()
其中用到了两个 CSS 属性，一个是 offset-path，表示运动的路径，另外一个则是 offset-distance，我是运动的距离，可以是数值或者百分比单位，如果是 100% 则表示正好把所有的路都跑完了。
除了 offset-path 和 offset-distance 这两个 CSS 属性，还有其他一些相关的属性，例如 offset-rotation（规范上显示的是 offset-rotate，浏览器是无效不识别的），表示运动的角度，默认是 auto，表示自动计算当前路径的切线方向，并朝着这个方向前进.
例如：
offset-rotation: 30deg延伸
除了沿路径布局之外，我们有时候还有要验证障碍物布局的方式。这种布局可以用 CSS shapes
关键词如下：
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); 看我之前的文章 iphoneX 适配 问题想到的：https://www.haorooms.com/post/iphonex_shipei
正文完
