The mask-origin property specifies the reference area for positioning the mask image — i.e., relative to which box (border/padding/content/SVG-specific) the mask-position is computed..mask-from-border {
mask-origin: border-box;
}.precise {
mask-image: url("icon.svg");
mask-origin: content-box;
mask-position: 50% 50%;
}border-boxMask position is relative to the top-left corner of the border box.padding-boxMask position is relative to the top-left corner of the padding box (default value).content-boxMask position is relative to the top-left corner of the content box.fill-boxMask position is relative to the SVG object's fill bounding box.stroke-boxMask position is relative to the SVG object's stroke bounding box.view-boxMask position is relative to the SVG viewBox.CSS Masking Module Level 1Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
