motion-path

La propriété motion-path définit le tracé d'un mouvement sur lequel un élément est positionné. La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété motion-offset. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée 0 de motion-offset ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.

Une direction de 0 degré est équivalente au vecteur de l'axe des abscisses dans le système de coordonnées relatif à l'objet. Autrement dit, si aucune transformation n'est appliquée sur l'élément ou sur ses ancêtres, une rotation de 0 degré pointera vers la droite.

Syntaxe

TBD

Syntaxe formelle

<url> | [ <basic-shape> | <path()> ] || <geometry-box> | none
où 
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
où 
<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
où 
<length-percentage> = <length> | <percentage>
<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

Exemples

L'exemple qui suit est tiré de cette démo présente sur GitHub. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés motion-path utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe :path() est utilisée avec motion-path et que le document SVG contient <path>. Si on compare ces deux données, on verra qu'elles sont identiques.

CSS

#firstScissorHalf {
  motion-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 {
  motion-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

<svg xmlns="https://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>

Résultat

Spécifications

Compatibilité des navigateurs