monks/mask_origin

The mask-origin CSS property sets the origin of a mask. This property determines the mask positioning area: the area within which a mask image is positioned. HTML elements can have masks contained within their content border box, padding box, or content box, whereas SVG elements (which don’t have the associated CSS layout boxes) can have masks contained inside their fill, stroke, or view box. For elements rendered as multiple boxes, such as a {{htmlelement(“span”)}} of text that spans more than one line, the mask-origin property specifies which boxes the {{cssxref(“box-decoration-break”)}} property operates on to determine the mask positioning area.

Values

border_box

</>

pub const border_box: #(String, String)

: The position is relative to the border box.

content_box

</>

pub const content_box: #(String, String)

: The position is relative to the content box.

fill_box

</>

pub const fill_box: #(String, String)

: The position is relative to the object bounding box.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

margin_box

</>

pub const margin_box: #(String, String)

margin-box value of mask-origin

padding_box

</>

pub const padding_box: #(String, String)

: The position is relative to the padding box.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for mask-origin

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

stroke_box

</>

pub const stroke_box: #(String, String)

: The position is relative to the stroke bounding box.

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for mask-origin. It will be wrapped in var() and have -- prepended.

view_box

</>

pub const view_box: #(String, String)

: Uses the nearest SVG viewport as reference box. If a {{svgattr(“viewBox”)}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.There are three non-standard values that are shortcuts for standard <coord-box> values: content is an alias for content-box, padding is an alias for padding-box, and border is an alias for border-box.