| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3JdZNFcbZx67CqvyazbXaTbDi-PK3Lam-DH_6cau_k2G5NvujO45AQmYFu3WztinADc
cache-control: public, max-age=3600
expires: Thu, 09 Oct 2025 06:23:25 GMT
last-modified: Thu, 09 Oct 2025 01:08:19 GMT
etag: W/"6d32b0c90bf12382b9c8e28b518e6062"
x-goog-generation: 1759972099523732
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 161905
x-goog-meta-goog-reserved-file-mtime: 1759970603
x-goog-hash: crc32c=ge+U9A==, md5=bTKwyQvxI4K5yOKLUY5gYg==
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: 647f388a5c11d2845fc1b4b9d98aef30
date: Thu, 09 Oct 2025 05:23:26 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
zoomAndPan - SVG | MDN
Toggle sidebar
zoomAndPan
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The zoomAndPan attribute specifies whether the SVG document can be magnified and panned.
Magnification in this context means the effect of a supplemental scale and translate transformation on the outermost SVG document fragment.
Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.
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"
zoomAndPan="disable">
<filter id="diffuseLighting" x="0" y="0" width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic" zoomAndPan="1">
<fePointLight x="60" y="60" z="20" />
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#diffuseLighting)" />
</svg>
Usage notes
| Value | disable | magnify |
|---|---|
| Default value | magnify |
| Animatable | No |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # ZoomAndPanAttribute |
Browser compatibility
svg.elements.svg.zoomAndPan
Loading…
svg.elements.view.zoomAndPan
Loading…