| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3JkkGGHDGJ5WyH_svhs1l3fD0v-RByupX8pMMiId0dELfKhinqRB2dUEWeOUUFOJZ71
x-goog-generation: 1760058443919899
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 161448
x-goog-meta-goog-reserved-file-mtime: 1760057008
x-goog-hash: crc32c=f/EoEA==, md5=aB5sSefL0YD8/DUD71MfKg==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: f4347d5598c8b34365c2fc851754b4b7
server: Google Frontend
via: 1.1 google
content-encoding: gzip
date: Fri, 10 Oct 2025 08:58:59 GMT
expires: Fri, 10 Oct 2025 09:58:58 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:07:24 GMT
etag: W/"681e6c49e7cbd180fcfc3503ef531f2a"
content-type: text/html
vary: Accept-Encoding
content-length: 21796
age: 96
x-cache: hit
to - SVG | MDN
to
The to attribute indicates the final value of the attribute that will be modified during the animation.
The value of the attribute will change between the from attribute value and this value.
You can use this attribute with the following SVG elements:
Example
html,
body,
svg {
height: 100%;
}
html
<svg viewBox="0 0 200 200" xmlns="https://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate
attributeType="XML"
attributeName="width"
fill="freeze"
from="100"
to="150"
dur="3s" />
</rect>
</svg>
animate, animateMotion, animateTransform
For <animate>, <animateMotion>, and <animateTransform>, to specifies the ending value of the animation.
| Value | <value> |
|---|---|
| Default value | None |
| Animatable | No |
The exact value type for this attribute depend on the value of the attribute that will be animated.
If a list of values is defined via the values attribute, the to attribute is ignored.
set
For the <set> element, to specifies the value for the attribute during the duration of the element.
| Value | <value> |
|---|---|
| Default value | None |
| Animatable | No |
The exact value type for this attribute depend on the value of the attribute that will be animated.
Specifications
| Specification |
|---|
| SVG Animations Level 2 # SetElementToAttribute |
| SVG Animations Level 2 # ToAttribute |