相抵路径 | offset-path (Motion Path) - CSS 中文开发手册 - Break易站

相抵路径 | offset-path (Motion Path) - CSS 中文开发手册

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

offset-pathCSS属性指定的元素定位偏移路径。精确元素在偏移路径上的位置由offset-distance属性决定。

偏移路径可以是具有一个或多个子路径的指定路径，也可以是未设置基本形状的几何图形。每个形状或路径必须定义计算值“0”的初始位置offset-distance和指定对象旋转到初始位置的初始方向。

在本说明书中，0度的方向（或旋转）相当于物体的局部坐标系中的正x轴的方向。换句话说，如果对象及其祖先类没有应用变换，则0度旋转指向UA的右侧。

该规范的早期版本称为此属性motion-path。

语法

TBD

形式语法

none | ray( [  && ? && contain? ] ) |  |  | [  ||  ]where 
 = closest-side | farthest-side | closest-corner | farthest-corner |  | {2}
 =  |  |  |  =  | fill-box | stroke-box | view-box
where 
 =  |  = inset( {1,4} [ round  ]? )
 = circle( [  ]? [ at  ]? )
 = ellipse( [ {2} ]? [ at  ]? )
 = polygon( ? , [  ]# )
 =  | margin-box
where 
 =  | closest-side | farthest-side
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]
 = nonzero | evenodd
 = border-box | padding-box | content-box

实例

下面的示例摘自可能为在GitHub上观看现场直播在支持浏览器中。第二个代码示例中的SVG是一个带有烟囱的房子的简单绘图。大offset-path第一个代码示例中的属性沿着房屋的外部边界移动一对剪刀。注意:path()类中的伪类。offset-path属性和元素在SVG中。如果你比较它们，你会发现它们是相同的。

#firstScissorHalf {
  offset-path: path(‘M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190‘);
}

#secondScissorHalf {
  offset-path: path(‘M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190‘);
}

规范

浏览器兼容性