---
title: "Anchor"
canonical_url: https://docs.zvid.io/docs/structure/properties/anchor/
source: docs/structure/properties/anchor.md
content_revision: 6338386a1dd87e4a
---

# Anchor

`anchor` controls the transform origin used for placement, rotation, and scaling.

```typescript
type Anchor =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";
```

Use `anchor: "center-center"` when `x` and `y` should represent the center point of an element.

With custom coordinates, an omitted anchor is `top-left`. With a non-custom
`position` preset, an omitted anchor takes that preset's value. `position`
still determines placement when supplied; use custom positioning for explicit
coordinates and margins. See [Layout](https://docs.zvid.io/docs/concepts/layout/).

## Example

Visual element fragment for `payload.visuals`. Replace the illustrative asset
URL with your public image URL before rendering.

```json
{
  "type": "IMAGE",
  "src": "https://cdn.example.com/photo.jpg",
  "x": 640,
  "y": 360,
  "width": 400,
  "height": 300,
  "anchor": "center-center"
}
```

## Used By

- [Text & HTML Elements](https://docs.zvid.io/docs/structure/text-elements/)
- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)
- [SVG Elements (deprecated)](https://docs.zvid.io/docs/structure/svg-elements/)