este offset-path Las propiedades en CSS definen la ruta que sigue un elemento durante la animación.
La propiedad fue construida originalmente como motion-path. Esto y todo lo relacionado motion-* Propiedad, cambio de nombre offset-* existir Especificación. Estamos cambiando el nombre en el anuario. Si desea utilizarlo ahora, probablemente sea mejor utilizar ambas sintaxis.
El siguiente es un ejemplo del uso de la sintaxis de ruta SVG:
.thing-that-moves {
/* "Old" syntax. Available in Blink browsers as of ~October 2015 */
motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
/* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}Esta propiedad no se puede animar, sino que define la ruta de la animación. usamos offset-path Propiedades para crear animaciones. Aquí hay un ejemplo simple de animación de desplazamientos de movimiento usando la animación @keyframes:
.thing-that-moves {
offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
animation: move 3s linear infinite;
}
@keyframes move {
100% {
motion-offset: 100%; /* Old */
offset-distance: 100%; /* New */
}
}En esta demostración, el círculo naranja sigue offset-path Lo configuramos en CSS. En realidad nosotros pintado Las rutas en el SVG son exactamente iguales. path() datos, pero no es necesario para obtener el movimiento.
Digamos que dibujamos un camino original como este en algún software de edición SVG:
Encontraremos un camino similar:
este d El valor del atributo es lo que queremos, podemos moverlo directamente a CSS y usarlo como offset-path:
Tenga en cuenta los valores sin unidades en la sintaxis de la ruta. Si aplica CSS a un elemento en un SVG, los valores de coordenadas utilizarán el sistema de coordenadas establecido en el SVG. viewBox. Si aplica acciones a otros elementos HTML, estos valores estarán en píxeles.
También tenga en cuenta que utilizamos un gráfico de señalar con el dedo para mostrar cómo el elemento gira automáticamente para mirar hacia adelante. Puedes controlarlo mediante offset-rotate:
.mover {
offset-rotate: auto; /* default, faces forward */
offset-rotate: reverse; /* faces backward */
offset-rotate: 30deg; /* set angle */
offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */
}valores
Hasta donde sabemos, path() y none es el único Empleado valor offset-path.
este offset-path La propiedad debe aceptar todos los valores siguientes.
path(): Especifique la ruta en la sintaxis de la etiqueta SVGshape(): Utilice directivas CSS-y en lugar de SVG para crear rutasurl(): Referencia al ID del elemento SVG que se utilizará como ruta de movimientonone: No especifique ninguna ruta de desplazamiento- Función de forma: Un conjunto de funciones CSS basadas en Especificaciones de formas CSSincluido:
Aquí hay algunas pruebas:
Incluso puedes decirle al elemento SVG que haga referencia a la ruta del mismo SVG definido por url() no parece funcionar.
Usando la API de animación web
Dan Wilson está en Uso futuro: rutas de movimiento CSS. Puede acceder a todo este mismo contenido en JavaScript a través de la API de animación web. Por ejemplo, supongamos que define un offset-path En CSS, aún puedes controlar las animaciones a través de JavaScript:
Más ejemplos
¡cuidadoso! Muchos de estos fueron creados antes del cambio. motion-* nombrado offset-*. Debería ser fácil solucionarlos si así lo deseas.
Soporte del navegador
¿Hay alguna otra manera de hacer esto?
Nuestra propia Sarah Drasner Escribió un artículo sobre SMIL.métodos nativos para animación SVG y cómo animateMotion Se utiliza para animar objetos a lo largo de una ruta SVG. Parece:
GreenSock is another way though. Sarah talks about this in GSAP + SVG for Power Users: Motion Along A Path (SVG not required). Example:
Almanac
on
Sep 5, 2011
clip-path
anuario
4 de mayo de 2018
punto de anclaje desplazado
anuario
el 22 de julio de 2016
distancia de compensación
anuario
existir
rotación compensada
anuario
El 9 de julio de 2025.
círculo()
anuario
existir
oval()
anuario
El 15 de julio de 2025.
ilustración()
anuario
Es el 18 de junio de 2025.
camino()
anuario
El 24 de julio de 2025.
polígono()
anuario
Es el 10 de junio de 2025.
forma()
.triangle { clip-path: shape(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, close); }
anuario
14 de agosto de 2025
URL()
.element { background-image: url("https://example.com/image.png"); }
anuario
El 15 de julio de 2025.
xywh()
.element { clip-path: xywh(60px 4em 50% 10vw round 10px 30px); }
