CSS参考手册
运动路径 | Motion Path
相抵路径 | offset-path
这是一种实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
offset-path
CSS属性指定的元素定位偏移路径。精确元素在偏移路径上的位置由offset-distance
属性决定。
偏移路径可以是具有一个或多个子路径的指定路径,也可以是未设置基本形状的几何图形。每个形状或路径必须定义计算值“0”的初始位置offset-distance
和指定对象旋转到初始位置的初始方向。
在本说明书中,0度的方向(或旋转)相当于物体的局部坐标系中的正x轴的方向。换句话说,如果对象及其祖先类没有应用变换,则0度旋转指向UA的右侧。
该规范的早期版本称为此属性motion-path
。
初始值 |
没有 |
---|---|
适用于 |
可变形的元素 |
遗传 |
没有 |
媒体 |
视觉 |
计算值 |
作为指定 |
动画类型 |
如<angle>,<basic-shape>或<path()> |
规范的顺序 |
每语法 |
创建堆叠上下文 |
是 |
语法
TBD
形式语法
none | ray( [ <angle> && <size>? && contain? ] ) | <path()> | <url> | [ <basic-shape> || <geometry-box> ]where
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where
<length-percentage> = <length> | <percentage>
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
where
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
实例
下面的示例摘自可能为在GitHub上观看现场直播在支持浏览器中。第二个代码示例中的SVG是一个带有烟囱的房子的简单绘图。大offset-path
第一个代码示例中的属性沿着房屋的外部边界移动一对剪刀。注意:path()
类中的伪类。offset-path
属性和<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');
}
<svg xmlns="http://www.w3.org/2000/svg"
width="700"
height="450"
viewBox="350 0 1400 900">
<rect x="595"
y="423"
width="610"
height="377"
fill="blue" />
<polygon points="506,423 900,190 1294,423"
fill="yellow" />
<polygon points="993,245 993,190 1086,190 1086,300"
fill="red" />
<path id="house" d="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"
fill="none"
stroke="black"
stroke-width="13"
stroke-linejoin="round"
stroke-linecap="round" />
<path id="firstScissorHalf"
d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
transform="translate(0,0)"
fill="green"
stroke="black"
stroke-width="5"
stroke-linejoin="round"
stroke-linecap="round"
fill-rule="evenodd" />
<path id="secondScissorHalf"
d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
transform="translate(0,0)"
fill="forestgreen"
stroke="black"
stroke-width="5"
stroke-linejoin="round"
stroke-linecap="round"
fill-rule="evenodd" />
</svg>
规范
Specification |
Status |
Comment |
---|---|---|
Motion Path Module Level 1The definition of 'offset-path' in that specification. |
Working Draft |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
46.0 (as motion-path) 55.0 (as offset-path) |
No support |
No support |
No support |
No support |
Feature |
Android |
Android Webview |
Firefox Mobile (Gecko) |
Firefox OS |
IE Mobile |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support |
No support |
46.0 (as motion-path) 55.0 (as offset-path) |
No support |
No support |
No support |
No support |
No support |
46.0 (as motion-path) 55.0 (as offset-path) |
运动路径 | Motion Path相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。