Propiedad offset-anchor de CSS

La propiedad offset-anchor define el punto de anclaje de un cuadro a lo largo de la ruta de desplazamiento. Una ruta de desplazamiento se considera ya sea la geometría de una forma básica que no ha sido estilizada o una ruta que consta de uno o más subtrazados. El punto de anclaje especifica el punto del cuadro que es el punto que se mueve a lo largo de la ruta de desplazamiento.

advertencia
Esta propiedad de desplazamiento es una tecnología experimental.

Valor inicial	auto
Se aplica a	Elementos transformables.
Heredable	No.
Animable	Sí.
Versión	Motion Path Module Level 1
Sintaxis DOM	object.style.offsetAnchor = "right top";

Sintaxis

Sintaxis de offset-anchor en CSS

css

offset-anchor: auto | <position>;

Ejemplo de la propiedad offset-anchor:

Ejemplo de código de offset-anchor en CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
        padding: 0 50px;
        width: 100%;
      }
      svg,
      .box {
        position: absolute;
      }
      .box {
        animation: move 3s 0ms infinite alternate ease-in-out;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        height: 50px;
        width: 50px;
        offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
        offset-anchor: center;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-anchor property example</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
`auto`	El centro del cuadro.
`<position>`	`<percentage>` - Un porcentaje para el desplazamiento horizontal es relativo al ancho de la caja de relleno. Un porcentaje para el desplazamiento vertical es relativo al alto de la caja de relleno. `<length>` - Un valor de longitud proporciona un desplazamiento de longitud desde la esquina superior izquierda de la caja de relleno de un cuadro.
`initial`	Establece el valor predeterminado de la propiedad.
`inherit`	Hereda la propiedad de su elemento principal.

Práctica

¿Cuál es la funcionalidad de la propiedad offset-anchor en CSS según el artículo de w3docs.com?

Determina el elemento en el que debe ocurrir el desplazamientoEstablece el origen para los desplazamientos de posición, descritos por las propiedades de desplazamiento, para un elemento de posiciónCambia el color de fondo de un elementoPermite establecer un elemento en una posición relativa respecto a otro elemento

Propiedad offset-anchor de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset-anchor: ​

Valores ​

Práctica ​

Propiedad offset-anchor de CSS

Sintaxis

Ejemplo de la propiedad offset-anchor:

Valores

Práctica