在此页

• 句法
• 描述
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

offset-path CSS property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system.

句法

/* Default */
offset-path: none;
/* Function values */
offset-path: ray(45deg closest-side contain);
/* URL */
offset-path: url(#path);
/* Shapes */
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
/* Geometry Boxes */
offset-path: margin-box;
offset-path: stroke-box;
/* Global values */
offset-path: inherit;
offset-path: initial;
offset-path: unset;
					

值

ray()

Taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the CSS gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the CSS radial gradient size values from closest-side to farthest-corner , and the keyterm contain .

url()

References the ID of an SVG shape -- circle , ellipse , line , path , polygon , polyline ，或 rect -- using the shape's geometry as the path.

<basic-shape>

Specifies a CSS shape including circle() , ellipse() , inset() , polygon() ，或 path() .

path()

A path string defined with SVG coordinate syntax.

none

Specifies no motion path at all.

描述

This property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element’s exact position on the offset path is determined by the offset-distance property. Each shape or path must define an initial position for the computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position.

Early versions of the spec called this property motion-path . It was changed to offset-path because the property describes static positions, not motion.

形式定义

初始值	none
适用于	transformable elements
继承	no
计算值	如指定
动画类型	as <angle>, <basic-shape> or <path()>
Creates stacking context	yes

形式句法

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}
<path()> = path( [ <fill-rule>, ]? <string> )
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where 
<length-percentage> = <length> | <percentage>
<fill-rule> = nonzero | evenodd
<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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<box> = border-box | padding-box | content-box
					

范例

Animating an element with offset-path

offset-path properties in the CSS code sample defines a motion path that is identical to the <path> element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney.

SVG

The top and bottom halves of the scissors would appear in the top left of the canvas were they not positioned along the starting point of the motion path defined by offset-path .

<svg xmlns="http://www.w3.org/2000/svg"
     width="700"
     height="450"
     viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <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" class="scissorHalf"
        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" class="scissorHalf"
        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>
					

CSS

.scissorHalf {
  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');
  animation: followpath 4s linear infinite;
}
@keyframes followpath {
   to {
     motion-offset: 100%;
     offset-distance: 100%;
   }
}
					

结果

规范

<body>

规范	状态	注释
Motion Path Module Level 1 The definition of 'offset-path' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
offset-path	Chrome 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: motion-path	Edge 完整支持 79 完整支持 79 完整支持 79 Alternate Name Alternate Name Uses the non-standard name: motion-path	Firefox 完整支持 72 完整支持 72 不支持 63 — 72 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 45 完整支持 45 完整支持 32 Alternate Name Alternate Name Uses the non-standard name: motion-path	Safari 不支持 No	WebView Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: motion-path	Chrome Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: motion-path	Firefox Android 完整支持 63 Disabled 完整支持 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 32 Alternate Name Alternate Name Uses the non-standard name: motion-path	Safari iOS 不支持 No	Samsung Internet Android 完整支持 6.0 注意事项 完整支持 6.0 注意事项 注意事项 path() is the only value type supported. 完整支持 5.0 Alternate Name Alternate Name Uses the non-standard name: motion-path
Supports the path() function as a value	Chrome 完整支持 64	Edge 完整支持 79	Firefox 完整支持 63	IE 不支持 No	Opera 完整支持 51	Safari 不支持 No	WebView Android 完整支持 64	Chrome Android 完整支持 64	Firefox Android 完整支持 63	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0
Supports the ray() function as a value	Chrome 完整支持 64	Edge 完整支持 79	Firefox 完整支持 71 Disabled 完整支持 71 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 51	Safari 不支持 No	WebView Android 完整支持 64	Chrome Android 完整支持 64	Firefox Android 不支持 No	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

使用非标名称。

另请参阅

• offset
• offset-distance
• offset-rotation
• SVG <path>

Other demos:

• Examples of the various values
• Triangle
• Scissors
• Eyes

元数据

• 最后修改： Jul 20, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Motion Path
4. 特性

   1. offset
   2. offset-anchor
   3. offset-distance
   4. offset-path
   5. offset-position
   6. offset-rotate