| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3LrlsbRUEiYmHbC_DXZzLpbPBZn7wBZyjUFG1jqZyFcbAIuSqA36yJhh4-ywD3NIuxp
x-goog-generation: 1760058741890993
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 188771
x-goog-meta-goog-reserved-file-mtime: 1760057037
x-goog-hash: crc32c=VWtijw==, md5=8kjFgzGn96xmK/hqNmljUw==
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: 5aac4628b3e8c79c39cf92ddc32cf7ee
server: Google Frontend
via: 1.1 google
content-encoding: gzip
date: Sun, 12 Oct 2025 04:22:32 GMT
expires: Sun, 12 Oct 2025 05:22:31 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:12:21 GMT
etag: W/"f248c58331a7f7ac662bf86a36696353"
content-type: text/html
vary: Accept-Encoding
content-length: 25262
age: 2647
x-cache: hit
mask - SVG | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
mask
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
mask 属性は、主に指定された <mask> 要素とその属性が属する要素を結びつけるために使用されるプレゼンテーション属性です。
メモ:
プレゼンテーション属性であるため、 mask には対応する CSS プロパティ mask があります。両方が指定された場合、 CSS プロパティが優先されます。
この属性は以下の SVG 要素で使用することができます。
例
html,
body,
svg {
height: 100%;
}
html
<svg viewBox="0 0 200 100" xmlns="https://www.w3.org/2000/svg">
<mask id="myMask" maskContentUnits="objectBoundingBox">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<polygon
fill="black"
points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
</mask>
<!--
赤丸の中に星形の穴を開け、
丸の下の黄色を見せます。
-->
<circle cx="50" cy="50" r="20" fill="yellow" />
<circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>
SVG2 以降、mask 属性は CSS プロパティとして定義されており、多くの他のプロパティ (mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite) の一括指定となっています。
使用上のメモ
| 値 | CSS プロパティ mask を参照 |
|---|---|
| 既定値 | none |
| アニメーション | 可 |
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |
ブラウザーの互換性
Loading…
関連情報
- CSS の
maskプロパティ