offset-path

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The 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.

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

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.

Syntax

/* 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;

Values

Currently, path() is the only supported value.
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, or rect -- using the shape's geometry as the path.
<basic-shape>
Specifies a CSS shape including circle(), ellipse(), inset(), polygon(), or path().
path()
A path string defined with SVG coordinate syntax.
none
Specifies no motion path at all.

Formal syntax

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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Examples

The following example is excerpted from a CodePen example. You can edit live in supporting browsers.

The 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.

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%;
   }
}

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>

Live Result

Specifications

Specification Status Comment
Motion Path Module Level 1
The definition of 'offset-path' in that specification.
Working Draft Initial definition
Initial valuenone
Applies totransformable elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typeas <angle>, <basic-shape> or <path()>
Canonical orderper grammar
Creates stacking contextyes

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-path
Experimental
Chrome Full support 55
Notes
Full support 55
Notes
Notes path() is the only value type supported.
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Edge No support NoFirefox Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes path() is the only value type supported.
Disabled From version 63: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 45
Notes
Full support 45
Notes
Notes path() is the only value type supported.
Full support 32
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Safari No support NoWebView Android Full support 55
Notes
Full support 55
Notes
Notes path() is the only value type supported.
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Chrome Android Full support 55
Notes
Full support 55
Notes
Notes path() is the only value type supported.
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Firefox Android Full support 63
Notes Disabled
Full support 63
Notes Disabled
Notes path() is the only value type supported.
Disabled From version 63: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43
Notes
Full support 43
Notes
Notes path() is the only value type supported.
Full support 32
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Safari iOS No support NoSamsung Internet Android Full support 6.0
Supports the path() function as a value
Experimental
Chrome Full support 64Edge No support NoFirefox Full support 63IE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Firefox Android Full support 63Opera Android Full support 47Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also

Other demos: