CSS Masking Module Level 1
CSS Masking Module Level 1
Editor’s Draft
12 December 2025
More details about this document
This version:
Latest published version:
Previous Versions:
Implementation Report:
Test Suites:
Feedback:
CSSWG Issues Repository
GitHub
Inline In Spec
Editors:
Dirk Schulze
Adobe Inc.
Brian Birtles
Mozilla Japan
Tab Atkins Jr.
Google
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.
Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.
Clipping describes the visible region of visual elements. The
region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-masking” in the title, like this:
“[css-masking]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
This section is not normative.
This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking.
Tests
General tests for clipping and masking
idlharness.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
1.1.
Clipping
A closed vector path, shape or polygon defines a so called
clipping path
. This clipping path is a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas.
A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right).
The
clip-path
property can use specified basic shapes as clipping path or reference an
clipPath
element with
graphics elements
to be used as clipping path.
Clipping
does
affect hit testing;
there are no hits outside the clip region,
only inside.
1.2.
Masking
The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.
A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).
Masks are applied using the
mask-image
or
mask-border-source
properties.
The
mask-image
property may reference a
mask
element. The content of the
mask
element serves as the mask.
Alternatively, for many simple uses, the
mask-image
property may refer directly to images to be used as mask, forgoing the need for an explicit
mask
element. This mask can then be sized and positioned just like CSS background images using the
mask-position
mask-size
and other characterizing properties.
The
mask-border-source
property splits a mask into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the
mask border image area
. The
mask-border
property serves as a shorthand property for
mask-border-source
and other characterizing properties.
The
mask
property serves as a shorthand property for all
mask-border
and
mask-image
affiliated properties.
Note:
While masking gives many possibilities for enhanced graphical effects and in general provides more control over the “visible portions” of the content, clipping paths can perform better and basic shapes are easier to interpolate.
Masking
does not
affect hit testing.
2.
Module interactions
This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the
Visual formatting model
from
[CSS21]
. Some values of these properties result in the creation of a
stacking context
. Furthermore, this specification replaces the section
Clipping: the clip property
from
[CSS21]
The compositing model follows the SVG compositing model
[SVG11]
: First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects
[FILTER-EFFECTS]
, clipping, masking and opacity.
This specification allows compositing multiple mask layers with the Porter Duff compositing operators defined in CSS Compositing and Blending
[COMPOSITING-1]
The term
object bounding box
follows the definition in SVG 1.1
[SVG11]
Tests
clip-filter-order.html
(live test)
(source)
clip-transform-order-2.html
(live test)
(source)
clip-transform-order.html
(live test)
(source)
clip-path-filter-order.html
(live test)
(source)
3.
Values
This specification follows the
CSS property definition conventions
from
[CSS21]
. Basic shapes are defined in CSS Shapes Module Level 1
[CSS-SHAPES]
. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3
[CSS3VAL]
In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as
inherit
as their property value
[CSS3VAL]
. For readability it has not been repeated explicitly.
4.
Terminology
Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders
[CSS3BG]
. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. The following terms in CSS Backgrounds and Borders have the following meaning in this specification:
Term in CSS Masking
Term in
[CSS3BG]
mask layer image
background images
mask painting area
background painting area
mask-size
background-size
mask-position
background-position
mask positioning area
background positioning area
mask border image
border-image
mask border image area
border image area
5.
Clipping Paths
The clipping path restricts the region to which paint can be applied, the so-called
clipping region
. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.
An element’s ancestors may also clip portions of their content (e.g., via their own
clip
or
clip-path
properties and/or if their
overflow
property is not
visible
). What is rendered is the cumulative intersection.
If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment.
A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a
clipPath
element via a
clip-path
property, or a child of the referencing element) must remain the same as if it were not clipped.
Tests
clip-absolute-positioned-001.html
(live test)
(source)
clip-absolute-positioned-002.html
(live test)
(source)
clip-negative-values-001.html
(live test)
(source)
clip-negative-values-002.html
(live test)
(source)
clip-negative-values-003.html
(live test)
(source)
clip-negative-values-004.html
(live test)
(source)
clip-no-clipping-001.html
(live test)
(source)
clip-no-clipping-002.html
(live test)
(source)
clip-not-absolute-positioned-001.html
(live test)
(source)
clip-not-absolute-positioned-002.html
(live test)
(source)
clip-not-absolute-positioned-003.html
(live test)
(source)
clip-not-absolute-positioned-004.html
(live test)
(source)
clip-rect-auto-001.html
(live test)
(source)
clip-rect-auto-002.html
(live test)
(source)
clip-rect-auto-003.html
(live test)
(source)
clip-rect-auto-004.html
(live test)
(source)
clip-rect-auto-005.html
(live test)
(source)
clip-rect-auto-006.html
(live test)
(source)
clip-path-circle-001.html
(live test)
(source)
clip-path-circle-002.html
(live test)
(source)
clip-path-circle-003.html
(live test)
(source)
clip-path-circle-004.html
(live test)
(source)
clip-path-circle-005.html
(live test)
(source)
clip-path-circle-006.html
(live test)
(source)
clip-path-circle-007.html
(live test)
(source)
clip-path-circle-008.html
(live test)
(source)
clip-path-circle-closest-corner.html
(live test)
(source)
clip-path-circle-farthest-corner.html
(live test)
(source)
clip-path-element-userSpaceOnUse-001.html
(live test)
(source)
clip-path-element-userSpaceOnUse-002.html
(live test)
(source)
clip-path-element-userSpaceOnUse-003.html
(live test)
(source)
clip-path-element-userSpaceOnUse-004.html
(live test)
(source)
clip-path-ellipse-001.html
(live test)
(source)
clip-path-ellipse-002.html
(live test)
(source)
clip-path-ellipse-003.html
(live test)
(source)
clip-path-ellipse-004.html
(live test)
(source)
clip-path-ellipse-005.html
(live test)
(source)
clip-path-ellipse-006.html
(live test)
(source)
clip-path-ellipse-007.html
(live test)
(source)
clip-path-ellipse-008.html
(live test)
(source)
clip-path-ellipse-closest-farthest-corner.html
(live test)
(source)
clip-path-filter-radius-clips.html
(live test)
(source)
clip-path-on-fixed-position-scroll.html
(live test)
(source)
clip-path-polygon-001.html
(live test)
(source)
clip-path-polygon-002.html
(live test)
(source)
clip-path-polygon-003.html
(live test)
(source)
clip-path-polygon-004.html
(live test)
(source)
clip-path-polygon-005.html
(live test)
(source)
clip-path-polygon-006.html
(live test)
(source)
clip-path-polygon-007.html
(live test)
(source)
clip-path-polygon-008.html
(live test)
(source)
clip-path-polygon-009.html
(live test)
(source)
clip-path-polygon-010.html
(live test)
(source)
clip-path-polygon-011.html
(live test)
(source)
clip-path-polygon-012.html
(live test)
(source)
clip-path-polygon-013.html
(live test)
(source)
clip-path-svg-invalidate.html
(live test)
(source)
clip-path-url-reference-change-from-empty.html
(live test)
(source)
clip-path-url-reference-change.html
(live test)
(source)
clip-path-url-reference-external.html
(live test)
(source)
clip-rule-001.html
(live test)
(source)
clip-rule-002.html
(live test)
(source)
Consider a shape that is clipped by a clipping path applied to an ancestor:
clip-path
"circle()"
path
id
"shape"
"M0,0 L10,10, L 20,0 z"
/>
The shape is referenced by a
use
element:
use
xlink:href
"#shape"
/>
The geometry of the shape is not influenced by the circular clipping path.
By default,
pointer-events
must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive
click
events outside the
clipping region
5.1.
Clipping Shape: the
clip-path
property
Name:
clip-path
Value:
||
none
Initial:
none
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
as specified, but with
values made absolute
Canonical order:
per grammar
Animation type:
by computed value
Media:
visual
Tests
clip-path-composition.html
(live test)
(source)
clip-path-geometry-box-interpolation.html
(live test)
(source)
clip-path-interpolation-001.html
(live test)
(source)
clip-path-interpolation-002.html
(live test)
(source)
clip-path-interpolation-shape-arc-direction-agnostic-radius.html
(live test)
(source)
clip-path-interpolation-shape-control-points.html
(live test)
(source)
clip-path-interpolation-shape.html
(live test)
(source)
clip-path-interpolation-xywh-rect.html
(live test)
(source)
clip-path-animation-cancel.html
(live test)
(source)
clip-path-animation-circle-0-percent.html
(live test)
(source)
clip-path-animation-custom-property.html
(live test)
(source)
clip-path-animation-custom-timing-function-reverse.html
(live test)
(source)
clip-path-animation-custom-timing-function.html
(live test)
(source)
clip-path-animation-ellipse-mixed-change.html
(live test)
(source)
clip-path-animation-ellipse.html
(live test)
(source)
clip-path-animation-ensure-keyframe-update.html
(live test)
(source)
clip-path-animation-filter.html
(live test)
(source)
clip-path-animation-fixed-position-rounding-error.html
(live test)
(source)
clip-path-animation-fixed-position.html
(live test)
(source)
clip-path-animation-font-size-inherited.html
(live test)
(source)
clip-path-animation-font-size-mixed-change.html
(live test)
(source)
clip-path-animation-font-size.html
(live test)
(source)
clip-path-animation-forward-fill-positive-delay.html
(live test)
(source)
clip-path-animation-forward-fill.html
(live test)
(source)
clip-path-animation-fragmented.html
(live test)
(source)
clip-path-animation-geometry-box-delay.html
(live test)
(source)
clip-path-animation-incompatible-shapes1.html
(live test)
(source)
clip-path-animation-incompatible-shapes2.html
(live test)
(source)
clip-path-animation-inherit.html
(live test)
(source)
clip-path-animation-initial.html
(live test)
(source)
clip-path-animation-inset-50-percent.html
(live test)
(source)
clip-path-animation-missing-0-percent.html
(live test)
(source)
clip-path-animation-mixed-calc.html
(live test)
(source)
clip-path-animation-mixed-interpolation.html
(live test)
(source)
clip-path-animation-non-keyframe-timing-function.html
(live test)
(source)
clip-path-animation-none.html
(live test)
(source)
clip-path-animation-overflow.html
(live test)
(source)
clip-path-animation-path.html
(live test)
(source)
clip-path-animation-polygon-mixed-change.html
(live test)
(source)
clip-path-animation-polygon.html
(live test)
(source)
clip-path-animation-reference-delay.html
(live test)
(source)
clip-path-animation-retarget.html
(live test)
(source)
clip-path-animation-revert-layer.html
(live test)
(source)
clip-path-animation-revert.html
(live test)
(source)
clip-path-animation-set-currenttime-forward-finish.html
(live test)
(source)
clip-path-animation-set-currenttime-negative.html
(live test)
(source)
clip-path-animation-set-duration-animation-finish.html
(live test)
(source)
clip-path-animation-set-effect.html
(live test)
(source)
clip-path-animation-start-time.html
(live test)
(source)
clip-path-animation-svg-zoom.html
(live test)
(source)
clip-path-animation-svg.html
(live test)
(source)
clip-path-animation-three-keyframes1.html
(live test)
(source)
clip-path-animation-three-keyframes2.html
(live test)
(source)
clip-path-animation-unset.html
(live test)
(source)
clip-path-animation-zero-duration.html
(live test)
(source)
clip-path-animation-zoom.html
(live test)
(source)
clip-path-animation.html
(live test)
(source)
clip-path-interpolation-discrete.html
(live test)
(source)
clip-path-path-interpolation-001.html
(live test)
(source)
clip-path-path-interpolation-002.html
(live test)
(source)
clip-path-path-interpolation-with-zoom.html
(live test)
(source)
clip-path-rect-interpolation-001.html
(live test)
(source)
clip-path-shape-interpolation-001.html
(live test)
(source)
clip-path-shape-interpolation-002.html
(live test)
(source)
clip-path-shape-interpolation-003.html
(live test)
(source)
clip-path-shape-interpolation-004.html
(live test)
(source)
clip-path-transition-allow-discrete.html
(live test)
(source)
clip-path-transition-crash.html
(live test)
(source)
clip-path-transition-custom-timing-function.html
(live test)
(source)
clip-path-transition.html
(live test)
(source)
clip-path-xywh-interpolation-001.html
(live test)
(source)
two-clip-path-animation-diff-length1.html
(live test)
(source)
two-clip-path-animation-diff-length2.html
(live test)
(source)
two-clip-path-animation-diff-length3.html
(live test)
(source)
two-clip-path-animation-diff-length4.html
(live test)
(source)
clip-path-blending-offset.html
(live test)
(source)
clip-path-borderBox-1a.html
(live test)
(source)
clip-path-borderBox-1b.html
(live test)
(source)
clip-path-borderBox-1c.html
(live test)
(source)
clip-path-borderBox-1d.html
(live test)
(source)
clip-path-borderBox-1e.html
(live test)
(source)
clip-path-columns-shape-001.html
(live test)
(source)
clip-path-columns-shape-002.html
(live test)
(source)
clip-path-contentBox-1a.html
(live test)
(source)
clip-path-contentBox-1b.html
(live test)
(source)
clip-path-contentBox-1c.html
(live test)
(source)
clip-path-contentBox-1d.html
(live test)
(source)
clip-path-contentBox-1e.html
(live test)
(source)
clip-path-descendant-text-mutated-001.html
(live test)
(source)
clip-path-document-element-will-change.html
(live test)
(source)
clip-path-document-element.html
(live test)
(source)
clip-path-fillBox-1a.html
(live test)
(source)
clip-path-fillBox-1b.html
(live test)
(source)
clip-path-fixed-nested.html
(live test)
(source)
clip-path-fixed-scroll.html
(live test)
(source)
clip-path-foreignobject-non-zero-xy.html
(live test)
(source)
clip-path-geometryBox-2.html
(live test)
(source)
clip-path-inline-001.html
(live test)
(source)
clip-path-inline-002.html
(live test)
(source)
clip-path-inline-003.html
(live test)
(source)
clip-path-inline-004.html
(live test)
(source)
clip-path-inline-005.html
(live test)
(source)
clip-path-inline-006.html
(live test)
(source)
clip-path-inline-007.html
(live test)
(source)
clip-path-inline-008.html
(live test)
(source)
clip-path-inline-009.html
(live test)
(source)
clip-path-inline-010.html
(live test)
(source)
clip-path-inset-round-percent.html
(live test)
(source)
clip-path-localRef-1.html
(live test)
(source)
clip-path-marginBox-1a.html
(live test)
(source)
clip-path-marginBox-1b.html
(live test)
(source)
clip-path-marginBox-1c.html
(live test)
(source)
clip-path-marginBox-1d.html
(live test)
(source)
clip-path-mix-blend-mode-1.html
(live test)
(source)
clip-path-paddingBox-1a.html
(live test)
(source)
clip-path-paddingBox-1b.html
(live test)
(source)
clip-path-paddingBox-1c.html
(live test)
(source)
clip-path-paddingBox-1d.html
(live test)
(source)
clip-path-paddingBox-1e.html
(live test)
(source)
clip-path-path-001.html
(live test)
(source)
clip-path-path-002.html
(live test)
(source)
clip-path-path-003.html
(live test)
(source)
clip-path-path-with-zoom-hittest.html
(live test)
(source)
clip-path-path-with-zoom.html
(live test)
(source)
clip-path-rect-001.html
(live test)
(source)
clip-path-rect-002.html
(live test)
(source)
clip-path-rect-003.html
(live test)
(source)
clip-path-rect-004.html
(live test)
(source)
clip-path-reference-box-001.html
(live test)
(source)
clip-path-reference-box-002.html
(live test)
(source)
clip-path-reference-box-003.html
(live test)
(source)
clip-path-reference-box-004.html
(live test)
(source)
clip-path-reference-restore.html
(live test)
(source)
clip-path-rotated-will-change-transform.html
(live test)
(source)
clip-path-round-zero-size.html
(live test)
(source)
clip-path-scroll.html
(live test)
(source)
clip-path-shape-001.html
(live test)
(source)
clip-path-shape-002-units.html
(live test)
(source)
clip-path-shape-002.html
(live test)
(source)
clip-path-shape-003.html
(live test)
(source)
clip-path-shape-004.html
(live test)
(source)
clip-path-shape-005.html
(live test)
(source)
clip-path-shape-006.html
(live test)
(source)
clip-path-shape-007.html
(live test)
(source)
clip-path-shape-008.html
(live test)
(source)
clip-path-shape-009.html
(live test)
(source)
clip-path-shape-010.html
(live test)
(source)
clip-path-shape-011.html
(live test)
(source)
clip-path-shape-foreignobject-non-zero-xy.html
(live test)
(source)
clip-path-shape-hline-vline-keywords.html
(live test)
(source)
clip-path-shape-winding.html
(live test)
(source)
clip-path-stacking-context-001.html
(live test)
(source)
clip-path-strokeBox-1a.html
(live test)
(source)
clip-path-strokeBox-1b.html
(live test)
(source)
clip-path-strokeBox-1c.html
(live test)
(source)
clip-path-svg-text-backdrop-filter.html
(live test)
(source)
clip-path-svg-text-font-loading.html
(live test)
(source)
clip-path-transform-mutated-001.html
(live test)
(source)
clip-path-transform-mutated-002.html
(live test)
(source)
clip-path-url-reference-svg-foreignobject-zoomed.html
(live test)
(source)
clip-path-viewBox-1a.html
(live test)
(source)
clip-path-viewBox-1b.html
(live test)
(source)
clip-path-viewBox-1c.html
(live test)
(source)
clip-path-viewBox-1d.html
(live test)
(source)
clip-path-xywh-001.html
(live test)
(source)
clip-path-xywh-002.html
(live test)
(source)
clip-path-xywh-003.html
(live test)
(source)
interpolation.html
(live test)
(source)
reference-local-url-with-base-001.html
(live test)
(source)
reference-mutated.html
(live test)
(source)
reference-nonexisting-existing-local.html
(live test)
(source)
svg-clip-path-circle-offset.html
(live test)
(source)
svg-clip-path-ellipse-offset.html
(live test)
(source)
svg-clip-path-fixed-values.html
(live test)
(source)
clip-path-element-objectboundingbox-001.html
(live test)
(source)
clip-path-element-objectboundingbox-002.html
(live test)
(source)
clip-path-element-userspaceonuse-001.html
(live test)
(source)
clip-path-shape-polygon-and-box-shadow.html
(live test)
(source)
clip-path-svg-geometry-box.html
(live test)
(source)
clip-path-computed.html
(live test)
(source)
clip-path-invalid.html
(live test)
(source)
clip-path-shape-parsing.html
(live test)
(source)
clip-path-valid.html
(live test)
(source)
Specifies a basic shape or references a
clipPath
element to create a
clipping path
fill-box
stroke-box
view-box
A basic shape function as defined in the CSS Shapes module
[CSS-SHAPES]
. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the
border-box
will be used as reference box.
If specified in combination with a
it provides the reference box for the
If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by
border-radius
[CSS3BG]
), as clipping path. See also
“Shapes from box values”
[CSS-SHAPES]
fill-box
Uses the
object bounding box
as reference box.
stroke-box
Uses the
stroke bounding box
as reference box.
view-box
Uses the nearest
SVG viewport
as reference box.
If a
viewBox
attribute is specified for the
SVG viewport
creating element:
The reference box is positioned at the origin of the coordinate system established by the
viewBox
attribute.
The dimension of the reference box is set to the
width
and
height
values of the
viewBox
attribute.
none
No
clipping path
gets created.
For SVG elements without associated CSS layout box, the
used value
for
content-box
and
padding-box
is
fill-box
and for
border-box
and
margin-box
is
stroke-box
For elements with associated CSS layout box, the
used value
for
fill-box
is
content-box
and for
stroke-box
and
view-box
is
border-box
A computed value of other than
none
results in the creation of a
stacking context
[CSS21]
the same way that CSS
opacity
[CSS3COLOR]
does for values other than
If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a
clipPath
element), no clipping is applied.
This example demonstrates the use of the basic shape
as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the
introduction
clip-path
polygon
15
px
99
px
30
px
87
px
65
px
99
px
85
px
55
px
122
px
57
px
184
px
73
px
198
px
105
px
199
px
150
px
145
px
159
px
155
px
139
px
126
px
120
px
112
px
138
px
80
px
128
px
39
px
126
px
24
px
104
px
);
In this example, the
clip-path
property references an SVG
clipPath
element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the
introduction
clip-path
url
"#clip1"
);
"clip1"
"15,99 30,87 65,99 85,55 122,57 184,73 198,105
199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"
/>
The
clip-path
property is a
presentation attribute
for SVG elements.
6.
SVG Clipping Path Sources
6.1.
The
clipPath
element
Name:
clipPath
Categories:
container elements
never-rendered element
Content model:
Any number of the following elements, in any order:
descriptive
desc
title
metadata
animation
animate
animateMotion
animateTransform
set
shape
circle
ellipse
line
path
polygon
polyline
rect
text
use
script
Attributes:
conditional processing attributes
‘requiredFeatures’
‘requiredExtensions’
‘systemLanguage’
core attributes
‘id’
‘xml:base’
‘xml:lang’
‘xml:space’
presentation attributes
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
color-interpolation
color-interpolation-filters
color-profile
color-rendering
cursor
direction
display
dominant-baseline
enable-background
fill
fill-opacity
fill-rule
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
image-rendering
kerning
letter-spacing
lighting-color
marker
marker-end
marker-mid
marker-start
mask
opacity
overflow
pointer-events
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
text-decoration
text-rendering
unicode-bidi
visibility
word-spacing
writing-mode
‘class’
‘style’
‘externalResourcesRequired’
‘transform’
clipPathUnits
DOM Interfaces:
SVGClipPathElement
Tests
clip-path-scaled-video.html
(live test)
(source)
clip-path-svg-text-css.html
(live test)
(source)
clip-path-clip-nested-twice.svg
(live test)
(source)
clip-path-clip-rule-001.svg
(live test)
(source)
clip-path-clip-rule-002.svg
(live test)
(source)
clip-path-clip-rule-003.svg
(live test)
(source)
clip-path-clip-rule-004.svg
(live test)
(source)
clip-path-clip-rule-005.svg
(live test)
(source)
clip-path-clip-rule-006.svg
(live test)
(source)
clip-path-clip-rule-007.svg
(live test)
(source)
clip-path-clip-rule-008.svg
(live test)
(source)
clip-path-clip-rule-009.svg
(live test)
(source)
clip-path-clip-rule-010.svg
(live test)
(source)
clip-path-clip.svg
(live test)
(source)
clip-path-content-clip-001.svg
(live test)
(source)
clip-path-content-clip-002.svg
(live test)
(source)
clip-path-content-clip-003.svg
(live test)
(source)
clip-path-content-clip-004.svg
(live test)
(source)
clip-path-content-invisible.svg
(live test)
(source)
clip-path-content-syling.svg
(live test)
(source)
clip-path-content-use-001.svg
(live test)
(source)
clip-path-content-use-002.svg
(live test)
(source)
clip-path-content-use-003.svg
(live test)
(source)
clip-path-content-use-004.svg
(live test)
(source)
clip-path-content-use-005.svg
(live test)
(source)
clip-path-content-use-006.svg
(live test)
(source)
clip-path-content-use-007.svg
(live test)
(source)
clip-path-css-transform-001.svg
(live test)
(source)
clip-path-css-transform-002.svg
(live test)
(source)
clip-path-css-transform-003.svg
(live test)
(source)
clip-path-css-transform-004.svg
(live test)
(source)
clip-path-dom-child-changes.svg
(live test)
(source)
clip-path-dom-clippathunits.svg
(live test)
(source)
clip-path-dom-href.svg
(live test)
(source)
clip-path-dom-id.svg
(live test)
(source)
clip-path-inset-stroke-001.svg
(live test)
(source)
clip-path-inset-stroke-002.svg
(live test)
(source)
clip-path-invalid-reference.svg
(live test)
(source)
clip-path-invalid.svg
(live test)
(source)
clip-path-negative-scale.svg
(live test)
(source)
clip-path-no-content-001.svg
(live test)
(source)
clip-path-no-content-002.svg
(live test)
(source)
clip-path-no-content-003.svg
(live test)
(source)
clip-path-no-content-004.svg
(live test)
(source)
clip-path-no-content-005.svg
(live test)
(source)
clip-path-objectboundingbox-001.svg
(live test)
(source)
clip-path-objectboundingbox-002.svg
(live test)
(source)
clip-path-objectboundingbox-003.svg
(live test)
(source)
clip-path-objectboundingbox-004.svg
(live test)
(source)
clip-path-on-g-001.svg
(live test)
(source)
clip-path-on-g-002.svg
(live test)
(source)
clip-path-on-g-003.svg
(live test)
(source)
clip-path-on-g-004.svg
(live test)
(source)
clip-path-on-g-005.svg
(live test)
(source)
clip-path-on-marker-001.svg
(live test)
(source)
clip-path-on-marker-002.svg
(live test)
(source)
clip-path-on-marker-003.svg
(live test)
(source)
clip-path-on-svg-001.svg
(live test)
(source)
clip-path-on-svg-002.svg
(live test)
(source)
clip-path-on-svg-003.svg
(live test)
(source)
clip-path-on-svg-004.svg
(live test)
(source)
clip-path-on-svg-005.svg
(live test)
(source)
clip-path-on-use-001.svg
(live test)
(source)
clip-path-on-use-002.svg
(live test)
(source)
clip-path-precision-001.svg
(live test)
(source)
clip-path-recursion-001.svg
(live test)
(source)
clip-path-recursion-002.svg
(live test)
(source)
clip-path-shape-circle-001.svg
(live test)
(source)
clip-path-shape-circle-002.svg
(live test)
(source)
clip-path-shape-circle-003.svg
(live test)
(source)
clip-path-shape-circle-004.svg
(live test)
(source)
clip-path-shape-circle-005.svg
(live test)
(source)
clip-path-shape-ellipse-001.svg
(live test)
(source)
clip-path-shape-ellipse-002.svg
(live test)
(source)
clip-path-shape-inset-001.svg
(live test)
(source)
clip-path-shape-inset-002.svg
(live test)
(source)
clip-path-shape-polygon-001.svg
(live test)
(source)
clip-path-shape-polygon-002.svg
(live test)
(source)
clip-path-shape-polygon-003.svg
(live test)
(source)
clip-path-text-001.svg
(live test)
(source)
clip-path-text-002.svg
(live test)
(source)
clip-path-text-003.svg
(live test)
(source)
clip-path-text-004.svg
(live test)
(source)
clip-path-text-005.svg
(live test)
(source)
clip-path-userspaceonuse-001.svg
(live test)
(source)
clip-path-with-opacity.svg
(live test)
(source)
clip-path-with-transform.svg
(live test)
(source)
mask-and-nested-clip-path.svg
(live test)
(source)
mask-nested-clip-path-001.svg
(live test)
(source)
mask-nested-clip-path-002.svg
(live test)
(source)
mask-nested-clip-path-003.svg
(live test)
(source)
mask-nested-clip-path-004.svg
(live test)
(source)
mask-nested-clip-path-005.svg
(live test)
(source)
mask-nested-clip-path-006.svg
(live test)
(source)
mask-nested-clip-path-007.svg
(live test)
(source)
mask-nested-clip-path-008.svg
(live test)
(source)
mask-nested-clip-path-009.svg
(live test)
(source)
mask-nested-clip-path-010.svg
(live test)
(source)
mask-nested-clip-path-panning-001.svg
(live test)
(source)
mask-nested-clip-path-panning-002.svg
(live test)
(source)
mask-objectboundingbox-content-clip-transform.svg
(live test)
(source)
mask-objectboundingbox-content-clip.svg
(live test)
(source)
mask-userspaceonuse-content-clip-transform.svg
(live test)
(source)
mask-userspaceonuse-content-clip.svg
(live test)
(source)
Attribute definitions:
clipPathUnits
= "
userSpaceOnUse
objectBoundingBox
Defines the coordinate system for the contents of the
clipPath
userSpaceOnUse
The contents of the
clipPath
represent values in the current
user coordinate system
in place at the time when the
clipPath
element is referenced (i.e., the
user coordinate system
for the element referencing the
clipPath
element via the
clip-path
property).
objectBoundingBox
The coordinate system has its origin at the top left corner of the
bounding box
of the element to which the clipping path applies to and the same width and height of this
bounding box
User coordinates
are sized equivalently to the CSS
px
unit.
If attribute
clipPathUnits
is not specified, then the effect is as if a value of
userSpaceOnUse
were specified.
Animatable: yes.
CSS properties inherit into the
clipPath
element from its ancestors; properties do
not
inherit from the element referencing the
clipPath
element.
clipPath
elements are never rendered directly; their only usage is as something that can be referenced using the
clip-path
property. The
display
property does not apply to the
clipPath
element; thus,
clipPath
elements are not directly rendered even if the
display
property is set to a value other than
none
, and
clipPath
elements are available for referencing even when the
display
property on the
clipPath
element or any of its ancestors is set to
none
clipPath
element can contain
path
elements,
text
elements,
basic shapes
(such as
circle
) or a
use
element. If a
use
element is a child of a
clipPath
element, it must directly reference
path
text
or
basic shapes
elements. Indirect references are an error and the
clipPath
element must be ignored.
Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference.
[Issue #17]
The raw geometry of each child element exclusive of rendering properties such as
fill
stroke
stroke-width
within a
clipPath
conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by
display
or
visibility
it does not contribute to the clipping path. When the
clipPath
element contains multiple child elements, the silhouettes of the child elements are logically OR’d together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the
clipPath
Define raw geometry with regards to CSS properties that affect it. Especially on text.
[Issue #170]
For a given
graphics element
, the actual clipping path used will be the intersection of the clipping path specified by its
clip-path
property (if any) with any clipping paths on its ancestors, as specified by the
clip-path
property on the elements which establish a new viewport. (See
[SVG11]
A couple of additions:
The
clipPath
element itself and its child elements do
not
inherit clipping paths from the ancestors of the
clipPath
element.
The
clipPath
element or any of its children can specify property
clip-path
If a valid
clip-path
reference is placed on a
clipPath
element, the resulting clipping path is the intersection of the contents of the
clipPath
element with the referenced clipping path.
If a valid
clip-path
reference is placed on one of the children of a
clipPath
element, then the given child element is clipped by the referenced clipping path before OR’ing the silhouette of the child element with the silhouettes of the other child elements.
An empty clipping path will completely clip away the element that had the
clip-path
property applied.
6.2.
Winding Rules: the
clip-rule
property
Name:
clip-rule
Value:
nonzero
evenodd
Initial:
nonzero
Applies to:
Applies to SVG
graphics elements
Inherited:
yes
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
clip-rule-no-interpolation.html
(live test)
(source)
clip-rule-computed.html
(live test)
(source)
clip-rule-invalid.html
(live test)
(source)
clip-rule-valid.html
(live test)
(source)
The
clip-rule
property indicates the algorithm which is to be used to determine whether a given point is inside a shape for a
clipping region
created with a
graphics element
. The definition of the algorithms and the
clip-rule
values follows the definition of the
fill-rule
property. See section
“Fill Properties”
in SVG 1.1
[SVG11]
nonzero
See description of
fill-rule
property
[SVG11]
evenodd
See description of
fill-rule
property
[SVG11]
The
clip-rule
property only applies to
graphics elements
that are contained within a
clipPath
element.
Note:
The
clip-rule
property does not apply to
s.
The following drawing illustrates the
nonzero
rule:
Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole".
The following drawing illustrates the
evenodd
rule:
Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole".
The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because
clip-rule
is specified on the
path
element that defines the clipping shape:
clip-rule
"nonzero"
clipPath
id
"MyClip"
path
"..."
clip-rule
"evenodd"
/>
clipPath
rect
clip-path
"url(#MyClip)"
...
/>
whereas the following fragment of code will
not
cause an evenodd clipping rule to be applied because the
clip-rule
is specified on the referencing element, not on the object defining the clipping shape:
clip-rule
"nonzero"
clipPath
id
"MyClip"
path
"..."
/>
clipPath
rect
clip-path
"url(#MyClip)"
clip-rule
"evenodd"
...
/>
The
clip-rule
property is a
presentation attribute
for SVG elements.
7.
Positioned Masks
7.1.
Mask Image Source: the
mask-image
property
Name:
mask-image
Value:
Initial:
none
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item the keyword
none
, a computed
, or a computed
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-image-interpolation.html
(live test)
(source)
firefox-bug-1928736-crash.html
(live test)
(source)
mask-image-1a.html
(live test)
(source)
mask-image-1b.html
(live test)
(source)
mask-image-1c.html
(live test)
(source)
mask-image-1d.html
(live test)
(source)
mask-image-2.html
(live test)
(source)
mask-image-3a.html
(live test)
(source)
mask-image-3b.html
(live test)
(source)
mask-image-3c.html
(live test)
(source)
mask-image-3d.html
(live test)
(source)
mask-image-3e.html
(live test)
(source)
mask-image-3f.html
(live test)
(source)
mask-image-3g.html
(live test)
(source)
mask-image-3h.html
(live test)
(source)
mask-image-3i.html
(live test)
(source)
mask-image-4a.html
(live test)
(source)
mask-image-4b.html
(live test)
(source)
mask-image-5.html
(live test)
(source)
mask-image-6.html
(live test)
(source)
mask-image-cors-001.sub.html
(live test)
(source)
mask-image-inline-sliced-1.html
(live test)
(source)
mask-image-svg-foreignobject-zoomed.html
(live test)
(source)
mask-image-svg-gradient-zoomed.html
(live test)
(source)
mask-image-svg-viewport-changed.html
(live test)
(source)
mask-opacity-1a.html
(live test)
(source)
mask-opacity-1b.html
(live test)
(source)
mask-opacity-1c.html
(live test)
(source)
mask-opacity-1d.html
(live test)
(source)
mask-opacity-1e.html
(live test)
(source)
mask-under-border-radius.html
(live test)
(source)
This property sets the
mask layer image
of an element. Where:
= none
A URL reference to a
mask
element (for example
url(commonmasks.svg#mask)
) or to a CSS image.
none
A value of
none
counts as a transparent black image layer.
Tests
mask-image-data-url-image.html
(live test)
(source)
mask-image-ib-split-2.html
(live test)
(source)
mask-image-ib-split.html
(live test)
(source)
mask-image-svg-child-will-change.html
(live test)
(source)
mask-image-url-image-hash.html
(live test)
(source)
mask-image-url-image.html
(live test)
(source)
mask-image-url-local-mask.html
(live test)
(source)
mask-image-url-remote-mask.html
(live test)
(source)
A computed value of other than
none
results in the creation of a
stacking context
[CSS21]
the same way that CSS
opacity
[CSS3COLOR]
does for values other than
A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an
mask
element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black.
See the section
“Mask processing”
for how to process a
mask layer image
Note:
A value of
none
in a list of
s may influence the masking operation depending on the used compositing operator specified by
mask-composite
Note:
counts as mask layer and can be combined in a repeatable
list with
or further
list items.
Note:
An element can also be masked with
mask-border-source
. See
mask-border-source
for the interaction of that property with
mask-image
Examples for mask references:
body
mask-image
linear-gradient
black
transparent
100
mask-image
none
div
mask-image
url
resources.svg#mask2
See the section
“Layering multiple mask layer images”
for how
mask-image
interacts with other comma-separated mask properties to form each mask layer.
7.2.
Mask Image Interpretation: the
mask-mode
property
Name:
mask-mode
Value:
Initial:
match-source
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item the keyword as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-mode-a.html
(live test)
(source)
mask-mode-b.html
(live test)
(source)
mask-mode-c.html
(live test)
(source)
mask-mode-d.html
(live test)
(source)
mask-mode-e.html
(live test)
(source)
mask-mode-luminance-with-mask-size.html
(live test)
(source)
mask-mode-to-mask-type-svg.html
(live test)
(source)
mask-mode-to-mask-type.html
(live test)
(source)
The
mask-mode
property indicates whether the
is treated as luminance mask or alpha mask. (See
Mask processing
.)
= alpha
luminance
match-source
Values have the following meanings:
alpha
A value of
alpha
indicates that the alpha values of the
mask layer image
should be used as the mask values. See
Calculating mask values
luminance
A value of
luminance
indicates that the luminance values of the
mask layer image
should be used as the mask values. See
Calculating mask values
match-source
If the
of the
mask-image
property is of type
the value specified by the referenced
mask
element’s
mask-type
property must be used.
If the
of the
mask-image
property is of type
the alpha values of the
mask layer image
should be used as the mask values.
In the following example, the
mask-type
property sets the mask type value for the
mask
element to
alpha
. The
mask-image
property has a reference to this
mask
element and the
mask-mode
property has a value of
luminance
. The
mask-mode
property will override the definition of
mask-type
to
luminance
The
mask-mode
property must not affect the masking mode of
mask-border-source
mask
id
"SVGMask"
mask-type
"alpha"
maskContentUnits
"objectBoundingBox"
radialGradient
id
"radialFill"
stop
stop-color
"white"
offset
"0"
/>
stop
stop-color
"black"
offset
"1"
/>
radialGradient
circle
fill
"url(#radialFill)"
cx
"0.5"
cy
"0.5"
"0.5"
/>
mask
style
rect
mask-image
url
#SVGMask
);
mask-mode
luminance
style
rect
width
"200"
height
"200"
fill
"green"
/>
See the section
“Layering multiple mask layer images”
for how
mask-mode
interacts with other comma-separated mask properties to form each mask layer.
7.3.
Tiling Mask Images: the
mask-repeat
property
Name:
mask-repeat
Value:
Initial:
repeat
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item a pair of keywords, one per dimension
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-repeat-1-svg.html
(live test)
(source)
mask-repeat-1.html
(live test)
(source)
mask-repeat-2-svg.html
(live test)
(source)
mask-repeat-2.html
(live test)
(source)
mask-repeat-3-svg.html
(live test)
(source)
mask-repeat-3.html
(live test)
(source)
mask-repeat-computed.html
(live test)
(source)
mask-repeat-invalid.html
(live test)
(source)
mask-repeat-valid.html
(live test)
(source)
Specifies how
mask layer images
are tiled after they have been
sized
and
positioned
See
background-repeat
property
[CSS3BG]
for the definitions of the property values.
body
background-color
blue
mask-image
url
dot-mask.png
luminance
mask-repeat
space
The effect of
space
: the
mask layer image
of a dot is tiled to cover the whole
mask painting area
and the
mask layer image
s are equally spaced.
See the section
“Layering multiple mask layer images”
for how
mask-repeat
interacts with other comma-separated mask properties to form each mask layer.
7.4.
Positioning Mask Images: the
mask-position
property
Name:
mask-position
Value:
Initial:
0% 0%
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
refer to size of
mask painting area
minus
size of
mask layer image
; see text
background-position
[CSS3BG]
Computed value:
list, each item consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a
), otherwise as a percentage.
Canonical order:
per grammar
Animation type:
repeatable list
Media:
visual
Tests
mask-position-interpolation.html
(live test)
(source)
mask-position-1a-svg.html
(live test)
(source)
mask-position-1a.html
(live test)
(source)
mask-position-1b.html
(live test)
(source)
mask-position-1c.html
(live test)
(source)
mask-position-2a.html
(live test)
(source)
mask-position-2b.html
(live test)
(source)
mask-position-3a.html
(live test)
(source)
mask-position-3b.html
(live test)
(source)
mask-position-4a.html
(live test)
(source)
mask-position-4b.html
(live test)
(source)
mask-position-4c.html
(live test)
(source)
mask-position-4d.html
(live test)
(source)
mask-position-5.html
(live test)
(source)
mask-position-6.html
(live test)
(source)
mask-position-7.html
(live test)
(source)
mask-position-8.html
(live test)
(source)
mask-position-invalid.html
(live test)
(source)
mask-position-valid.html
(live test)
(source)
See the
background-position
property
[CSS3BG]
for the definitions of the property values.
In the example below, the (single) image is placed in the lower-right corner of the viewport.
body
mask-image
url
"logo.png"
);
mask-position
100
100
mask-repeat
no-repeat
Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:
mask-position
right
em
bottom
10
px
See the section
“Layering multiple mask layer images”
for how
mask-position
interacts with other comma-separated mask properties to form each mask layer.
7.5.
Masking Area: the
mask-clip
property
Name:
mask-clip
Value:
no-clip ]
Initial:
border-box
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item the keyword as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-clip-1.html
(live test)
(source)
mask-clip-2.html
(live test)
(source)
mask-clip-3.html
(live test)
(source)
mask-clip-4.html
(live test)
(source)
mask-clip-5.html
(live test)
(source)
mask-clip-6.html
(live test)
(source)
mask-clip-7.html
(live test)
(source)
mask-clip-8.html
(live test)
(source)
For
mask layer images
that do not reference a
mask
element,
mask-clip
determines the
mask painting area
, which determines the area that is affected by the mask. The painted content of an element must be restricted to this area.
The
mask-clip
property has no affect on a
mask layer image
that references a
mask
element. The
width
height
and
maskUnits
attributes on the
mask
element determine the
mask painting area
for mask references.
Values have the following meanings:
content-box
The painted content is restricted to (clipped to) the
content box
padding-box
The painted content is restricted to (clipped to) the
padding box
border-box
The painted content is restricted to (clipped to) the
border box
fill-box
The painted content is restricted to (clipped to) the
object bounding box
stroke-box
The painted content is restricted to (clipped to) the
stroke bounding box
view-box
Uses the nearest
SVG viewport
as reference box.
If a
viewBox
attribute is specified for the
SVG viewport
creating element:
The reference box is positioned at the origin of the coordinate system established by the
viewBox
attribute.
The dimension of the reference box is set to the
width
and
height
values of the
viewBox
attribute.
no-clip
The painted content is not restricted (not clipped).
For SVG elements without associated CSS layout box, the
used value
s for
content-box
and
padding-box
compute to
fill-box
and for
border-box
compute to
stroke-box
For elements with associated CSS layout box, the
used value
s for
fill-box
compute to
content-box
and for
stroke-box
and
view-box
compute to
border-box
See the section
“Layering multiple mask layer images”
for how
mask-clip
interacts with other comma-separated mask properties to form each mask layer.
7.6.
Positioning Area: the
mask-origin
property
Name:
mask-origin
Value:
Initial:
border-box
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item the keyword as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-origin-1.html
(live test)
(source)
mask-origin-3.html
(live test)
(source)
For elements rendered as a single box, specifies the
mask positioning area
. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes
box-decoration-break
operates on to determine the mask positioning area.
content-box
The position is relative to the
content box
padding-box
The position is relative to the
padding box
. (For single boxes
0 0
is the upper left corner of the padding edge,
100% 100%
is the lower right corner.)
border-box
The position is relative to the
border box
fill-box
The position is relative to the
object bounding box
stroke-box
The position is relative to the
stroke bounding box
view-box
Uses the nearest
SVG viewport
as reference box.
If a
viewBox
attribute is specified for the
SVG viewport
creating element:
The reference box is positioned at the origin of the coordinate system established by the
viewBox
attribute.
The dimension of the reference box is set to the
width
and
height
values of the
viewBox
attribute.
For SVG elements without associated CSS layout box, the values
content-box
padding-box
and
border-box
compute to
fill-box
For elements with associated CSS layout box, the values
fill-box
stroke-box
and
view-box
compute to the initial value of
mask-origin
Note:
The
mask-origin
property is similar to the
background-origin
property
[CSS3BG]
, but it has a different set of values, and a different initial value.
Note:
If
mask-clip
is
padding-box
mask-origin
is
border-box
mask-position
is
top left
(the initial value), and the element has a non-zero border, then the top and left of the
mask layer image
will be clipped.
See the section
“Layering multiple mask layer images”
for how
mask-origin
interacts with other comma-separated mask properties to form each mask layer.
7.7.
Sizing Mask Images: the
mask-size
property
Name:
mask-size
Value:
Initial:
auto
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
list, each item as specified, but with lengths made absolute
Canonical order:
per grammar
Animation type:
repeatable list
Media:
visual
Tests
mask-size-auto-auto.html
(live test)
(source)
mask-size-auto-length.html
(live test)
(source)
mask-size-auto-percent.html
(live test)
(source)
mask-size-auto.html
(live test)
(source)
mask-size-contain-clip-border.html
(live test)
(source)
mask-size-contain-clip-padding.html
(live test)
(source)
mask-size-contain-position-fifty-fifty.html
(live test)
(source)
mask-size-contain.html
(live test)
(source)
mask-size-cover.html
(live test)
(source)
mask-size-length-auto.html
(live test)
(source)
mask-size-length-length.html
(live test)
(source)
mask-size-length-percent.html
(live test)
(source)
mask-size-length.html
(live test)
(source)
mask-size-percent-auto.html
(live test)
(source)
mask-size-percent-length.html
(live test)
(source)
mask-size-percent-percent-stretch.html
(live test)
(source)
mask-size-percent-percent.html
(live test)
(source)
mask-size-percent.html
(live test)
(source)
Specifies the size of the
mask layer images
See
background-size
property
[CSS3BG]
for the definitions of the property values.
See the section
“Layering multiple mask layer images”
for how
mask-size
interacts with other comma-separated mask properties to form each mask layer.
7.8.
Compositing mask layers: the
mask-composite
property
Name:
mask-composite
Value:
Initial:
add
Applies to:
All elements. In SVG, it applies to
container elements
without the
defs
element and all
graphics elements
Inherited:
no
Percentages:
n/a
Computed value:
list, each item the keyword as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-composite-1a.html
(live test)
(source)
mask-composite-1b.html
(live test)
(source)
mask-composite-1c.html
(live test)
(source)
mask-composite-1d.html
(live test)
(source)
mask-composite-2a.html
(live test)
(source)
mask-composite-2b.html
(live test)
(source)
mask-composite-2c.html
(live test)
(source)
mask-composite-2d.html
(live test)
(source)
mask-composite-computed.html
(live test)
(source)
mask-composite-invalid.html
(live test)
(source)
mask-composite-valid.html
(live test)
(source)
= add
subtract
intersect
exclude
Each keyword represents a Porter-Duff compositing operator
[COMPOSITING-1]
which defines the compositing operation used on the current mask layer with the mask layers below it.
In the following, the current mask layer is referred to
source
, all mask layers below it (with the corresponding compositing operators applied) are referred to
destination
add
The
source
is placed over the
destination
. (See Porter-Duff compositing operator
source over
for more details.)
subtract
The
source
is placed, where it falls outside of the
destination
. (See Porter-Duff compositing operator
source out
for more details.)
intersect
The parts of
source
that overlap the
destination
, replace the
destination
. (See Porter-Duff compositing operator
source in
.)
exclude
The non-overlapping regions of
source
and
destination
are combined. (See Porter-Duff compositing operator
XOR
.)
If there is no further mask layer, the compositing operator must be ignored. Mask layers must not composite with the element’s content or the content behind the element, instead they must act as if they are rendered into an isolated group.
All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer.
This example uses two
mask layer images
circle.svg
and
rect.svg
Both
mask layer images
are references with the
mask-image
property:
mask-image
circle.svg
rect.svg
The mask layer with
rect.svg
is below the mask layer with
circle.svg
. That means
circle.svg
is closer to the user than
rect.svg
With the property
mask-composite
the author may choose different ways to combine multiple mask layers.
add
paints the
circle.svg
on top of
rect.svg
. The behavior is described by the compositing operator
source over
mask-composite
add
subtract
paints portions of
circle.svg
that do not overlap
rect.svg
. The behavior is described by the compositing operator
source out
mask-composite
subtract
intersect
paints portions of
circle.svg
that overlap
rect.svg
. The behavior is described by the compositing operator
source in
mask-composite
intersect
exclude
paints portions of
circle.svg
and
rect.svg
that do not overlap. The behavior is described by the compositing operator
XOR
mask-composite
exclude
The following example specifies two mask layers and two compositing operators.
mask-image
rect.svg
circle.svg
mask-composite
add
exclude
rect.svg
and
circle.svg
make use of the
add
compositing operator. There is no further mask layer to use
exclude
and therefore,
exclude
is ignored.
This is an example of 3 mask layers with different compositing operators.
mask-image
trapeze.svg
circle.svg
rect.svg
mask-composite
subtract
add
First,
circle.svg
is “added” to
rect.svg
. In a second step, only portions of
trapeze.svg
that are not overlapping the compositing result of the previous two layers is visible.
See the section
“Layering multiple mask layer images”
for how
mask-composite
interacts with other comma-separated mask properties to form each mask layer.
7.9.
Mask Shorthand: the
mask
property
Name:
mask
Value:
Initial:
see individual properties
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
see individual properties
Computed value:
see individual properties
Canonical order:
per grammar
Animation type:
see individual properties
Media:
visual
Tests
mask-no-interpolation.html
(live test)
(source)
mask-image-clip-exclude.html
(live test)
(source)
mask-shorthand-subproperties-reset.html
(live test)
(source)
mask-computed.html
(live test)
(source)
mask-invalid.html
(live test)
(source)
mask-valid.sub.html
(live test)
(source)
||
[ /
||
||
||
no-clip ]
||
||
If one
value and the
no-clip
keyword are present then
sets
mask-origin
and
no-clip
sets
mask-clip
to that value.
If one
value and no
no-clip
keyword are present then
sets both
mask-origin
and
mask-clip
to that value.
If two
values are present, then the first sets
mask-origin
and the second
mask-clip
The
used value
of the properties
mask-repeat
mask-position
mask-clip
mask-origin
and
mask-size
must have no effect if
references a
mask
element. In this case the element defines position, sizing and clipping of the
mask layer image
The
mask
shorthand also resets
mask-border
to its initial value. It is therefore recommended that authors use the
mask
shorthand, rather than other shorthands or the individual properties, to override any mask settings earlier in the cascade. This will ensure that
mask-border
has also been reset to allow the new styles to take effect.
7.10.
The Mask Image Rendering Model
The application of the
mask-image
property with a value other than
none
to an element formatted with the CSS box model establishes a
stacking context
in the same way that CSS
opacity
[CSS3COLOR]
does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.
The
mask-image
property has no effect on the geometry or hit-testing of any element’s CSS boxes.
The
mask
property is a
presentation attribute
for SVG elements.
7.10.1.
Mask processing
In the following section,
mask image
refers either to a
mask layer image
or to a
mask border image
A mask image may be interpreted using one of two different methods with regards to calculating the mask values that will be multiplied with the target alpha values.
The first and simplest method of calculating the mask values is to use the alpha channel of the
mask image
. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.
The second method of calculating the mask values is to use the luminance of the mask image. In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure.
Compute a luminance value from the color channel values.
If the computed value of
color-interpolation
on the
mask
element is
linearRGB
, convert the original image color values (potentially in the sRGB color space) to the linearRGB color space.
Then, using non-premultiplied RGB color values, apply the luminance-to-alpha coefficients (as defined in the
feColorMatrix
filter primitive
[SVG11]
) to convert the RGB color values to luminance values.
Multiply the computed luminance value by the corresponding alpha value to produce the mask value.
Regardless of the method used, the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.
For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.
For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.
Note:
When referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.
Note:
SVG
graphics elements
(e.g.,
circle
or
text
) are all treated as four-channel RGBA images for the purposes of masking operations.
The effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask’s resulting mask values.
Regions not covered by a
mask image
are treated as transparent black. The mask value is 0.
Note:
Masks with repeating
mask image
tiles may have an offset to each other. The space between the
mask images
is treated as a transparent black mask.
7.10.2.
Layering Multiple Mask Images
The mask of a box can have multiple layers. The number of layers is determined by the number of comma-separated values for the
mask-image
property. A value of
none
in a list of values with other
s still creates a layer.
See
Layering Multiple Background Images
[CSS3BG]
mask-mode
and
mask-composite
do not have counterparts in CSS Backgrounds and Borders
[CSS3BG]
. Just like for the mask properties that do have a counterpart, the list of values are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
All
mask layer images
are transformed to alpha masks (if necessary see
Mask processing
) and combined by compositing taking the compositing operators specified by
mask-composite
into account.
8.
Border-Box Mask
With
mask-border
an image can be split into nine pieces: four corners, four edges and the middle piece as demonstrated in the figure below.
Pieces of a
mask border image
These pieces may be sliced, scaled and stretched in various ways to fit the size of the
mask border image area
. This distorted image is then used as a mask. The syntax of
mask-border
corresponds to the
border-image
property of CSS Background and Borders
[CSS3BG]
The
mask border image
in the following example is split into four corners with dimensions of 75 pixels, four edges and the middle piece that is stretched and scaled.
Example for
mask-border
. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.
div
background
linear-gradient
bottom
#F27BAA
#FCC8AD
100
);
mask-border-slice
25
fill
mask-border-repeat
stretch
mask-border-source
url
mask.png
);
8.1.
Mask Border Image Source: the
mask-border-source
property
Name:
mask-border-source
Value:
none
Initial:
none
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
they keyword
none
or the computed
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-border-source-interpolation.html
(live test)
(source)
Specifies an image to be used as
mask border image
An image that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. It still counts as an
mask border image
but does not mask the element.
See “
Mask processing
” on how to process the
mask border image
A computed value of other than
none
results in the creation of a
stacking context
[CSS21]
the same way that CSS
opacity
[CSS3COLOR]
does for values other than
mask-border-source
and
mask-image
can be specified independent of each other. If both properties have a value other than
none
, the element is masked by both masking operations one after the other.
Note:
It does not matter if
mask-image
is applied to the element before or after
mask-border-source
. Both operation orders result in the same rendering.
8.2.
Mask Border Image Interpretation: the
mask-border-mode
property
Name:
mask-border-mode
Value:
luminance
alpha
Initial:
alpha
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
The
mask-border-mode
property indicates whether the
value for
mask-border-source
is treated as luminance mask or alpha mask. (See
Mask processing
.)
Values have the following meanings:
alpha
A value of
alpha
indicates that the alpha values of the
mask border image
should be used as the mask values. See
Calculating mask values
luminance
A value of
luminance
indicates that the luminance values of the
mask border image
should be used as the mask values. See
Calculating mask values
The
mask-mode
and
mask-type
properties must have no affect on the
mask border image
type.
8.3.
Mask Border Image Slicing: the
mask-border-slice
property
Name:
mask-border-slice
Value:
{1,4}
fill
Initial:
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
refer to size of the
mask border image
Computed value:
as specified
Canonical order:
per grammar
Animation type:
by computed value
Media:
visual
Tests
mask-border-slice-composition.html
(live test)
(source)
mask-border-slice-interpolation-stability.html
(live test)
(source)
mask-border-slice-interpolation.html
(live test)
(source)
This property specifies inward offsets from the top, right, bottom, and left edges of the
mask border image
, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded and treated as fully opaque white (the content covered by the middle part is not masked and shines through) unless the
fill
keyword is present.
See the
border-image-slice
property
[CSS3BG]
for the definitions of the property values.
8.4.
Masking Areas: the
mask-border-width
property
Name:
mask-border-width
Value:
auto ]
{1,4}
Initial:
auto
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
relative to width/height of the
mask border image area
Computed value:
all
s made absolute, otherwise as specified
Canonical order:
per grammar
Animation type:
by computed value
Media:
visual
Tests
mask-border-width-composition.html
(live test)
(source)
mask-border-width-interpolation.html
(live test)
(source)
The
mask border image
is drawn inside an area called the
mask border image area
. This is an area whose boundaries by default correspond to the border box, see
mask-border-outset
See the
border-image-width
property
[CSS3BG]
for the definitions of the property values.
Note:
For SVG elements without an associated layout box the
border-width
is considered to be
8.5.
Edge Overhang: the
mask-border-outset
property
Name:
mask-border-outset
Value:
{1,4}
Initial:
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
all
s made absolute, otherwise as specified
Canonical order:
per grammar
Animation type:
by computed value
Media:
visual
Tests
mask-border-outset-composition.html
(live test)
(source)
mask-border-outset-interpolation.html
(live test)
(source)
The values specify the amount by which the
mask border image area
extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.
As with
mask-border-width
, a
represents a multiple of the corresponding
border-width
. Negative values are not allowed for any of the
mask-border-outset
values.
Note:
For SVG elements without associated layout box the
border-width
is considered to be
8.6.
Mask Border Image Tiling: the
mask-border-repeat
property
Name:
mask-border-repeat
Value:
[ stretch
repeat
round
space ]
{1,2}
Initial:
stretch
Applies to:
All elements. In SVG, it applies to
container elements
excluding the
defs
element, all
graphics elements
and the
use
element
Inherited:
no
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
This property specifies how the images for the sides and the middle part of the
mask border image
are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.
See the
border-image-repeat
property
[CSS3BG]
for the definitions of the property values.
The exact process for scaling and tiling the
mask border image
parts is given in the section
Masking with the mask border image
8.7.
Mask Border Image Shorthand: the
mask-border
property
Name:
mask-border
Value:
<'mask-border-source'>
||
<'mask-border-slice'>
[ /
<'mask-border-width'>
[ /
<'mask-border-outset'>
||
<'mask-border-repeat'>
||
<'mask-border-mode'>
Initial:
See individual properties
Applies to:
See individual properties
Inherited:
no
Percentages:
n/a
Computed value:
See individual properties
Canonical order:
per grammar
Animation type:
See individual properties
Media:
visual
This is a shorthand property for setting
mask-border-source
mask-border-slice
mask-border-width
mask-border-outset
mask-border-repeat
and
mask-border-mode
. Omitted values are set to their initial values.
Note:
The
mask
shorthand resets the properties
mask-border
mask-border-source
mask-border-slice
mask-border-width
mask-border-outset
mask-border-repeat
and
mask-border-mode
8.8.
Masking with the mask border image
After the
mask border image
given by
mask-border-source
is sliced by the
mask-border-slice
values, the resulting nine images are scaled, positioned, and tiled into their corresponding
mask border image
regions in four steps as described in the section
Drawing the Border Image
[CSS3BG]
The application of the
mask-border-source
property to an element formatted with the CSS box model establishes a
stacking context
in the same way that CSS
opacity
[CSS3COLOR]
does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.
The
mask-border-source
property has no effect on the geometry or hit-testing of any element’s CSS boxes.
9.
SVG Mask Sources
9.1.
The
mask
element
Name:
mask
Categories:
container elements
never-rendered element
Content model:
Any number of the following elements, in any order:
animation
animate
animateMotion
animateTransform
set
descriptive
desc
title
metadata
shape
circle
ellipse
line
path
polygon
polyline
rect
structural
defs
svg
symbol
use
gradient
linearGradient
radialGradient
clipPath
color-profile
cursor
filter
font
font-face
foreignObject
image
marker
mask
pattern
script
style
switch
view
text
altGlyphDef
Attributes:
conditional processing attributes
‘requiredFeatures’
‘requiredExtensions’
‘systemLanguage’
core attributes
‘id’
‘xml:base’
‘xml:lang’
‘xml:space’
presentation attributes
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
color-interpolation
color-interpolation-filters
color-profile
color-rendering
cursor
direction
display
dominant-baseline
enable-background
fill
fill-opacity
fill-rule
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
image-rendering
kerning
letter-spacing
lighting-color
marker
marker-end
marker-mid
marker-start
mask
opacity
overflow
pointer-events
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
text-decoration
text-rendering
unicode-bidi
visibility
word-spacing
writing-mode
‘class’
‘style’
width
height
maskUnits
maskContentUnits
DOM Interfaces:
SVGMaskElement
Tests
mask-empty-container-with-filter.svg
(live test)
(source)
mask-invalid-reference.svg
(live test)
(source)
mask-negative-scale.svg
(live test)
(source)
mask-text-001.svg
(live test)
(source)
mask-type-001.svg
(live test)
(source)
mask-type-002.svg
(live test)
(source)
mask-type-003.svg
(live test)
(source)
mask-with-filter-clipped-to-region.svg
(live test)
(source)
mask-with-filter.svg
(live test)
(source)
mask-with-rotation.svg
(live test)
(source)
Attribute definitions:
maskUnits
= "
userSpaceOnUse
objectBoundingBox
Defines the coordinate system for attributes
width
and
height
userSpaceOnUse
width
and
height
represent values in the current
user coordinate system
[CSS3-TRANSFORMS]
in place at the time when the
mask
element is referenced (i.e., the
user coordinate system
for the element referencing the
mask
element via the
mask
property).
objectBoundingBox
width
and
height
represent fractions or percentages of the
object bounding box
of the element to which the mask is applied.
User coordinates
are sized equivalently to the CSS
px
unit.
If attribute
maskUnits
is not specified, then the effect is as if a value of
objectBoundingBox
were specified.
Animatable: yes.
maskContentUnits
= "
userSpaceOnUse
objectBoundingBox
Defines the coordinate system for the contents of the
mask
userSpaceOnUse
The
user coordinate system
for the contents of the
mask
element is the current
user coordinate system
in place at the time when the
mask
element is referenced (i.e., the
user coordinate system
for the element referencing the
mask
element via the
mask
property).
objectBoundingBox
The coordinate system has its origin at the top left corner of the
bounding box
of the element to which the clipping path applies to and the same width and height of this
bounding box
User coordinates
are sized equivalently to the CSS
px
unit.
If attribute
maskContentUnits
is not specified, then the effect is as if a value of
userSpaceOnUse
were specified.
Animatable: yes.
= "
The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified but at least one of the attributes
width
or
height
are specified, the effect is as if a value of
-10%
were specified.
Animatable: yes.
= "
The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified but at least one of the attributes
width
or
height
are specified, the effect is as if a value of
-10%
were specified.
Animatable: yes.
width
= "
The width of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element.
If the attribute is not specified but at least one of the attributes
or
height
are specified, the effect is as if a value of
120%
were specified.
Animatable: yes.
height
= "
The height of the largest possible offscreen buffer.
A negative value or a value of zero disables rendering of the element.
If the attribute is not specified but at least one of the attributes
or
width
are specified, the effect is as if a value of
120%
were specified.
Animatable: yes.
If at least one of the attributes
width
or
height
are specified, the given object and the rectangle defined by
width
and
height
establish a current clipping path. The rendered content of the mask must be clipped by this current clipping path.
CSS properties inherit into the
mask
element from its ancestors; properties do
not
inherit from the element referencing the
mask
element.
mask
elements are never rendered directly; their only usage is as something that can be referenced using the
mask
property. The
opacity
filter
and
display
properties do not apply to the
mask
element; thus,
mask
elements are not directly rendered even if the
display
property is set to a value other than
none
, and
mask
elements are available for referencing even when the
display
property on the
mask
element or any of its ancestors is set to
none
9.2.
Mask Source Interpretation: the
mask-type
property
Name:
mask-type
Value:
luminance
alpha
Initial:
luminance
Applies to:
mask
elements
Inherited:
no
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
discrete
Media:
visual
Tests
mask-type-computed.html
(live test)
(source)
mask-type-invalid.html
(live test)
(source)
mask-type-valid.html
(live test)
(source)
The
mask-type
property defines whether the content of the
mask
element is treated as as luminance mask or alpha mask, as described in
Calculating mask values
Values have the following meanings:
luminance
Indicates that the luminance values of the mask should be used.
alpha
Indicates that the alpha values of the mask should be used.
The
mask-type
property allows the author of the
mask
element to specify the preferred masking mode. However, the author can override this preference by setting the
mask-mode
value to something different than
match-source
on the masked content.
In the following example the computed value of
mask-type
is
luminance
and the computed value of
mask-mode
is
match-source
. The UA must follow the preferred masking mode defined on the
mask
element.
svg
mask
style
"mask-type: luminance;"
id
"mask"
...
mask
svg
style
"mask-image: url(#mask); mask-mode: match-source;"
This is the masked content.
In the next example the computed value of
mask-mode
is
alpha
and overrides the preference on the
mask
element that is computed to
luminance
. The
mask layer image
is used as an alpha mask.
svg
mask
style
"mask-type: luminance;"
id
"mask2"
...
mask
svg
style
"mask-image: url(#mask2); mask-mode: alpha;"
This is the masked content.
The
mask-type
property is a
presentation attribute
for SVG elements.
10.
Privacy Considerations
It is important that the timing to the masking operations is independent of the source and destination pixel. Masking operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values. If this rule is not followed, an attacker could infer information and mount a timing attack.
A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element.
While CSS capabilities like those defined in this module can be used to hide content from a site visitor, Web developers should not use these features to hide
sensitive
content from users or page scripts. Content that is hidden from a user’s display via CSS can still be accessed and read from page scripts or form submissions. Web developers should treat the capabilities in this spec (as with all CSS specs) as cosmetic changes only, and not imposing or defending a privacy boundary.
11.
Security Considerations
s and
s have special requirements on fetching resources.
User agents must use the
potentially CORS-enabled fetch
method defined by the
[FETCH]
specification for all
and
values on the
mask-image
mask-border-source
and
clip-path
properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value
none
had been specified.
Appendix A: The deprecated
clip
property
Name:
clip
Value:
auto
Initial:
auto
Applies to:
Absolutely positioned elements. In SVG, it applies to
elements which establish a new viewport
pattern
elements and
mask
elements.
Inherited:
no
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
by
computed value
Media:
visual
Tests
clip-interpolation.html
(live test)
(source)
clip-fixed-pos-transform-descendant-001.html
(live test)
(source)
clip-no-stacking-context.html
(live test)
(source)
clip-rect-comma-001.html
(live test)
(source)
clip-rect-comma-002.html
(live test)
(source)
clip-rect-comma-003.html
(live test)
(source)
clip-rect-comma-004.html
(live test)
(source)
clip-rect-scroll.html
(live test)
(source)
clip-computed.html
(live test)
(source)
clip-invalid.html
(live test)
(source)
clip-valid.html
(live test)
(source)
With this specification the
clip
property is deprecated. Authors are encouraged to use the
clip-path
property instead. UAs must support the
clip
property.
The
clip
property applies only to absolutely positioned elements. In SVG, it applies to
elements which establish a new viewport
pattern
elements and
mask
elements. Values have the following meanings:
auto
The element does not clip.
rect()
= rect(
and
specify offsets from the top border edge of the box, and
, and
specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.
, and
may either have a
value or
auto
. Negative lengths are permitted. The value
auto
means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e.,
auto
means the same as
for
and
, the same as the
used value
of the height plus the sum of vertical padding and border widths for
, and the same as the used value of the width plus the sum of the horizontal padding and border widths for
, such that four
auto
values result in the clipping region being the same as the element’s border box).
When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when
and
have the same value (or
and
have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are
auto
The
clip
property is a
presentation attribute
for SVG elements.
Example: The following two rules:
p#one
clip
rect
px
40
px
45
px
px
);
p#two
clip
rect
px
55
px
45
px
px
);
and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:
This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See
long description
.)
Appendix B: Compute stroke bounding box
The algorithm to compute the
stroke bounding box
is as follows, depending on the type of
element
graphics element
without
use
or
image
an
element with a
text content element
Let
box
be a rectangle initialized to the
object bounding box
of
element
If the
used value
of
stroke-width
<= 0 or the used value of
stroke
is
none
return
box
Let
delta
be the inflation value initialized to the half of the
stroke-width
If
element
is not
rect
ellipse
circle
or
image
just follow one of the following conditions in the order they apply:
the used value for
stroke-linejoin
is
miter
Let
miter
be the used value of
stroke-miterlimit
If
miter
is smaller than the square root of 2 and if the used value for
stroke-linecap
is
square
, multiply
delta
with the square root of 2. Otherwise, multiply
delta
with
miter
the used value for
stroke-linecap
is
square
Multiply
delta
with the square root of 2.
Inflate
box
with the value of
delta
Return
box
Note:
The values of the
stroke-opacity
stroke-dasharray
and
stroke-dashoffset
do not affect the calculation of the stroke bounding box.
container element
use
Let
parent
be the
container element
if it is one, or the root of the
use
element’s shadow tree otherwise.
For each child
child
of
parent
Invoke the stroke bounding box algorithm with
child
Let
childBox
be the returned box value of the invoked algorithm.
Map
childBox
from the coordinate space of
child
to the coordinate space of
parent
Let
box
be the union of all
childBox
es.
Return
box
image
Return the
object bounding box
of
element
Note:
A future version of the SVG specification may override this section.
Appendix C: DOM interfaces
Interface SVGClipPathElement
The
SVGClipPathElement
interface corresponds to the
clipPath
element.
Exposed
Window
interface
SVGClipPathElement
SVGElement
readonly
attribute
SVGAnimatedEnumeration
clipPathUnits
readonly
attribute
SVGAnimatedTransformList
transform
};
Attributes:
clipPathUnits
of type
SVGAnimatedEnumeration
, readonly
Corresponds to attribute
clipPathUnits
on the given
clipPath
element. Takes one of the constants defined in
SVGUnitTypes
transform
of type
SVGAnimatedTransformList
, readonly
Corresponds to presentation attribute
transform
on the given element.
Interface SVGMaskElement
The
SVGMaskElement
interface corresponds to the
mask
element.
Exposed
Window
interface
SVGMaskElement
SVGElement
readonly
attribute
SVGAnimatedEnumeration
maskUnits
readonly
attribute
SVGAnimatedEnumeration
maskContentUnits
readonly
attribute
SVGAnimatedLength
readonly
attribute
SVGAnimatedLength
readonly
attribute
SVGAnimatedLength
width
readonly
attribute
SVGAnimatedLength
height
};
Attributes:
maskUnits
of type
SVGAnimatedEnumeration
, readonly
Corresponds to attribute
maskUnits
on the given
mask
element. Takes one of the constants defined in
SVGUnitTypes
maskContentUnits
of type
SVGAnimatedEnumeration
, readonly
Corresponds to attribute
maskContentUnits
on the given
mask
element. Takes one of the constants defined in
SVGUnitTypes
of type
SVGAnimatedLength
, readonly
Corresponds to attribute
on the given
mask
element.
of type
SVGAnimatedLength
, readonly
Corresponds to attribute
on the given
mask
element.
width
of type
SVGAnimatedLength
, readonly
Corresponds to attribute
width
on the given
mask
element.
height
of type
SVGAnimatedLength
, readonly
Corresponds to attribute
height
on the given
mask
element.
Changes since last publication
The following changes were made since the
5 August 2021 Candidate Recommendation Draft
Added a privacy concern regarding hiding sensitive content
Separated Security and Privacy sections
Minor editorial and markup changes
Added Web Platform Tests coverage
The following changes were made since the
26 August 2014 Candidate Recommendation
Allowed the
<'mask-mode'>
value in the
mask
shorthand to appear anywhere other than between
<'mask-position'>
and
<'mask-size'>
Removed Implements SVGUnitTypes on clipPath and mask elements.
Apply properties that apply to all graphics elements to the use element as well.
Change initial value of
mask-position
to
0% 0%
and of
mask-repeat
to
repeat
Remove
margin-box
as possible value from
mask-origin
and
mask-clip
Clarify that
mask-clip
has no affect on
mask layer image
s that reference a
mask
element.
Clarify
mask
shorthand behavior on appearance of one
and the
no-clip
keyword.
mask-mode
on a
mask layer image
that is a reference to a
mask
element with a value of
match-source
should take the value of the
mask-type
property on this
mask
element.
Mapping of boxes for SVG elements with and without associated CSS layout box changed to match mapping in Fill and Stroke spec.
Editorial changes.
The following changes were made since the
22 May 2014 Working Draft
Change the inital value of
mask-size
from border-box to auto.
The following changes were made since the
13 February 2014 Working Draft
Renamed mask-box* properties and terms to mask-border*.
Added support for multiple mask layers. (Similar to multiple background layers for
background
.)
Added the
mask-composite
property to control compositing of multiple
mask layer images
with the keywords
add
subtract
intersect
and
exclude
mask-border-slice
without keyword
fill
does not clip middle piece of content anymore. Changed initial value from
0 fill
to
Better description for
clip-rule
mask-mode
and
mask-type
Rename
fill
and
stroke
keywords to
fill-box
and
stroke-box
Added definition for
stroke bounding box
Better differentiation between mask images:
mask layer image
and
mask border image
The following changes were made since the
29 October 2013 Last Call Working Draft
Remove note that a future version of the spec will allow controlling hit testing on clipping.
Changed order of sections within the document.
Make clear that the
used value
of the properties
mask-image
mask-repeat
mask-position
mask-clip
mask-origin
and
mask-size
must be ignored for
, not the properties.
"Animatable" section of
mask-size
mask-position
described as repeatable list of lists. Changed to a single list.
Computed value of
mask-repeat
and
mask-position
was described as list of items. Changed to have just one value.
Change link to ED from
to
The following significant changes were made since the
20 June 2013 Working Draft
mask
resets
mask-box
properties.
Initial values for
mask-repeat
mask-position
and
mask-origin
changed to
no-repeat
center
and
border-box
Multiple layers of mask images were deferred to a future level of this specification.
Added security model for pixel operations and fetching of masking and clipping resources.
Deferred "child" and select() function to next level.
The following significant changes were made since the
15 November 2012 Working Draft
Better integration with terms and definitions of CSS Backgrounds and Borders module.
Syntax changes on
mask
shorthand property to be conform with
background
shorthand property.
Define how the implementation can differ between an SVG resource (
mask
clipPath
) and an image resource.
Added
mask-mode
property to alter between luminance and alpha mask on
mask-image
Adapt IDL definition of SVGMaskElement and SVGClipPathElement to WebIDL.
Further editorial changes.
See detailed list of changes in the
ChangeLog
Acknowledgments
Thanks to Elika J. Etemad, Cameron McCormack, Liam R. E. Quin, Björn Höhrmann, Alan Stearns, Jarek Foksa, David Baron, Boris Zbarsky, Markus Stange and Sara Soueidan for their careful reviews, comments, and corrections. Special thanks to CJ Gammon for graphical assets.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
add
, in § 7.8
alpha
value for mask-border-mode
, in § 8.2
value for mask-mode
, in § 7.2
value for mask-type
, in § 9.2
border-box
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
, in § Unnumbered section
clip
, in § Unnumbered section
clip-path
, in § 5.1
clipPath
, in § 6.1
clipPathUnits
attribute for SVGClipPathElement
, in § Unnumbered section
element-attr for clipPath
, in § 6.1
clipping path
, in § 1.1
clipping region
, in § 5
clip-rule
, in § 6.2
, in § 5.1
, in § 7.8
content-box
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
destination
, in § 7.8
evenodd
, in § 6.2
exclude
, in § 7.8
fill
, in § 8.3
fill-box
value for clip-path
, in § 5.1
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
, in § 5.1
height
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
intersect
, in § 7.8
, in § Unnumbered section
luminance
value for mask-border-mode
, in § 8.2
value for mask-mode
, in § 7.2
value for mask-type
, in § 9.2
mask
(element)
, in § 9.1
(property)
, in § 7.9
mask-border
, in § 8.7
mask border image
, in § 8.1
mask border image area
, in § 8.4
mask-border-mode
, in § 8.2
mask-border-outset
, in § 8.5
mask-border-repeat
, in § 8.6
mask-border-slice
, in § 8.3
mask-border-source
, in § 8.1
mask-border-width
, in § 8.4
mask-clip
, in § 7.5
mask-composite
, in § 7.8
maskContentUnits
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
mask image
, in § 7.10.1
mask-image
, in § 7.1
, in § 7.2
, in § 7.9
mask layer image
, in § 7.1
mask-mode
, in § 7.2
mask-origin
, in § 7.6
mask painting area
, in § 7.5
mask-position
(property)
, in § 7.4
definition of
, in § 4
mask positioning area
, in § 7.6
, in § 7.1
mask-repeat
, in § 7.3
mask-size
(property)
, in § 7.7
definition of
, in § 4
, in § 7.1
mask-type
, in § 9.2
maskUnits
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
match-source
, in § 7.2
no-clip
, in § 7.5
nonzero
, in § 6.2
objectBoundingBox
value for clipPathUnits
, in § 6.1
value for maskContentUnits
, in § 9.1
value for maskUnits
, in § 9.1
padding-box
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
rect()
, in § Unnumbered section
, in § Unnumbered section
source
, in § 7.8
stroke bounding box
, in § Unnumbered section
stroke-box
value for clip-path
, in § 5.1
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
subtract
, in § 7.8
SVGClipPathElement
, in § Unnumbered section
SVGMaskElement
, in § Unnumbered section
, in § Unnumbered section
transform
, in § Unnumbered section
, in § 7.1
userSpaceOnUse
value for clipPathUnits
, in § 6.1
value for maskContentUnits
, in § 9.1
value for maskUnits
, in § 9.1
view-box
value for clip-path
, in § 5.1
value for mask-clip
, in § 7.5
value for mask-origin
, in § 7.6
width
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
attribute for SVGMaskElement
, in § Unnumbered section
element-attr for mask
, in § 9.1
Terms defined by reference
[CSS-BOX-4]
defines the following terms:
[CSS-BREAK-4]
defines the following terms:
box-decoration-break
[CSS-CASCADE-5]
defines the following terms:
used value
[CSS-COLOR-4]
defines the following terms:
color
opacity
[CSS-DISPLAY-4]
defines the following terms:
display
none
visibility
[CSS-FONTS-4]
defines the following terms:
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
[CSS-IMAGES-3]
defines the following terms:
image-rendering
[CSS-INLINE-3]
defines the following terms:
alignment-baseline
baseline-shift
dominant-baseline
[CSS-OVERFLOW-3]
defines the following terms:
overflow
visible
[CSS-SHAPES]
defines the following terms:
polygon()
[CSS-TEXT-4]
defines the following terms:
letter-spacing
word-spacing
[CSS-TEXT-DECOR-4]
defines the following terms:
text-decoration
[CSS-UI-4]
defines the following terms:
cursor
pointer-events
[CSS-VALUES-4]
defines the following terms:
px
{A,B}
||
[CSS-VALUES-5]
defines the following terms:
[CSS-WRITING-MODES-3]
defines the following terms:
direction
unicode-bidi
[CSS-WRITING-MODES-4]
defines the following terms:
glyph-orientation-vertical
writing-mode
[CSS21]
defines the following terms:
auto
stacking context
[CSS3-TRANSFORMS]
defines the following terms:
transform
user coordinate system
[CSS3BG]
defines the following terms:
background
background painting area
background positioning area
background-origin
background-position
background-repeat
background-size
border image area
border-image
border-image-repeat
border-image-slice
border-image-width
border-radius
border-width
[FILL-STROKE-3]
defines the following terms:
miter
square
[FILTER-EFFECTS]
defines the following terms:
color-interpolation-filters
feColorMatrix
filter
flood-color
flood-opacity
lighting-color
linearRGB
[SVG-ANIMATIONS]
defines the following terms:
animate
animateMotion
animateTransform
set
[SVG11]
defines the following terms:
altGlyphDef
color-profile
cursor
enable-background
font-face
glyph-orientation-horizontal
kerning
[SVG2]
defines the following terms:
SVGAnimatedEnumeration
SVGAnimatedLength
SVGAnimatedTransformList
SVGElement
SVGUnitTypes
basic shape
bounding box
circle
color-interpolation
color-rendering
container element
defs
desc
ellipse
fill
fill-opacity
fill-rule
foreignObject
graphics element
image
line
linearGradient
marker
marker-end
marker-mid
marker-start
metadata
never-rendered element
object bounding box
path
pattern
polygon
polyline
radialGradient
rect
script
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
style
svg
switch
symbol
text
text content element
text-anchor
text-rendering
title
use
view
viewBox
[WEBIDL]
defines the following terms:
Exposed
References
Normative References
[COMPOSITING-1]
Chris Harrelson.
Compositing and Blending Level 1
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-FONTS-4]
Chris Lilley.
CSS Fonts Module Level 4
. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. URL:
[CSS-SHAPES]
Alan Stearns; Rossen Atanassov; Noam Rosenthal.
CSS Shapes Module Level 1
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii.
CSS Text Decoration Module Level 4
. URL:
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal.
CSS Basic User Interface Module Level 4
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne.
CSS Values and Units Module Level 5
. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS21]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-TRANSFORMS]
Simon Fraser; et al.
CSS Transforms Module Level 1
. URL:
[CSS3BG]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS3VAL]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[FETCH]
Anne van Kesteren.
Fetch Standard
. Living Standard. URL:
[FILL-STROKE-3]
Elika Etemad; Tab Atkins Jr..
CSS Fill and Stroke Module Level 3
. URL:
[FILTER-EFFECTS]
Dirk Schulze; Dean Jackson.
Filter Effects Module Level 1
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SVG-ANIMATIONS]
SVG Animations Level 2
. Editor's Draft. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Non-Normative References
[CSS3COLOR]
Tantek Çelik; Chris Lilley; David Baron.
CSS Color Module Level 3
. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
Media
clip
auto
Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
no
n/a
by computed value
per grammar
as specified
visual
clip-path
none
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
by computed value
per grammar
as specified, but with
visual
clip-rule
nonzero | evenodd
nonzero
Applies to SVG graphics elements
yes
n/a
discrete
per grammar
as specified
visual
mask
see individual properties
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
see individual properties
see individual properties
per grammar
see individual properties
visual
mask-border
<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>
See individual properties
See individual properties
no
n/a
See individual properties
per grammar
See individual properties
visual
mask-border-mode
luminance | alpha
alpha
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
as specified
visual
mask-border-outset
[
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
by computed value
per grammar
all
visual
mask-border-repeat
[ stretch | repeat | round | space ]{1,2}
stretch
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
as specified
visual
mask-border-slice
[
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
refer to size of the mask border image
by computed value
per grammar
as specified
visual
mask-border-source
none |
none
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
they keyword none or the computed
visual
mask-border-width
[
auto
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
relative to width/height of the mask border image area
by computed value
per grammar
all
visual
mask-clip
[
border-box
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
list, each item the keyword as specified
visual
mask-composite
add
All elements. In SVG, it applies to container elements without the defs element and all graphics elements
no
n/a
discrete
per grammar
list, each item the keyword as specified
visual
mask-image
none
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
list, each item the keyword none, a computed
visual
mask-mode
match-source
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
list, each item the keyword as specified
visual
mask-origin
border-box
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
list, each item the keyword as specified
visual
mask-position
0% 0%
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG]
repeatable list
per grammar
list, each item consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a
visual
mask-repeat
repeat
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
discrete
per grammar
list, each item a pair of keywords, one per dimension
visual
mask-size
auto
All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
no
n/a
repeatable list
per grammar
list, each item as specified, but with lengths made absolute
visual
mask-type
luminance | alpha
luminance
mask elements
no
n/a
discrete
per grammar
as specified
visual
IDL Index
Exposed
Window
interface
SVGClipPathElement
SVGElement
readonly
attribute
SVGAnimatedEnumeration
clipPathUnits
readonly
attribute
SVGAnimatedTransformList
transform
};
Exposed
Window
interface
SVGMaskElement
SVGElement
readonly
attribute
SVGAnimatedEnumeration
maskUnits
readonly
attribute
SVGAnimatedEnumeration
maskContentUnits
readonly
attribute
SVGAnimatedLength
readonly
attribute
SVGAnimatedLength
readonly
attribute
SVGAnimatedLength
width
readonly
attribute
SVGAnimatedLength
height
};
Issues Index
Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference.
[Issue #17]
Define raw geometry with regards to CSS properties that affect it. Especially on text.
[Issue #170]
MDN
SVGClipPathElement/clipPathUnits
In all current engines.
Firefox
1.5+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGClipPathElement/transform
In all current engines.
Firefox
1.5+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGClipPathElement
In all current engines.
Firefox
1.5+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/height
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/maskContentUnits
In all current engines.
Firefox
3+
Safari
3.1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/maskUnits
In all current engines.
Firefox
3+
Safari
3.1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/width
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/x
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement/y
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
SVGMaskElement
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
1+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
12.1+
MDN
clip-path
In all current engines.
Firefox
3.5+
Safari
9.1+
Chrome
55+
Opera
Edge
79+
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
Attribute/clip-path
In no current engines.
Firefox
Safari
Chrome
Opera
Edge
Edge (Legacy)
IE
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border-outset
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border-repeat
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border-slice
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border-source
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border-width
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-border
In no current engines.
Firefox
None
Safari
None
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
None
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-clip
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
None
Samsung Internet
Opera Mobile
MDN
mask-composite
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-image
Firefox
53+
Safari
15.4+
Chrome
None
Opera
None
Edge
None
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
None
Samsung Internet
None
Opera Mobile
None
MDN
mask-mode
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-origin
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
None
Samsung Internet
Opera Mobile
MDN
mask-position
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
None
Samsung Internet
Opera Mobile
MDN
mask-repeat
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
None
Samsung Internet
Opera Mobile
MDN
mask-size
Firefox
53+
Safari
15.4+
Chrome
None
Opera
Edge
None
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
15.4+
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
mask-type
In all current engines.
Firefox
35+
Safari
7+
Chrome
24+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
37+
Samsung Internet
Opera Mobile
MDN
mask
In only one current engine.
Firefox
2+
Safari
Chrome
Opera
Edge
Edge (Legacy)
None
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
Attribute/mask
In no current engines.
Firefox
Safari
Chrome
Opera
Edge
Edge (Legacy)
IE
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
Attribute/clip-rule
In no current engines.
Firefox
Safari
Chrome
Opera
Edge
Edge (Legacy)
IE
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
Element/clipPath
In all current engines.
Firefox
1.5+
Safari
3+
Chrome
1+
Opera
9+
Edge
79+
Edge (Legacy)
12+
IE
9+
Firefox for Android
iOS Safari
3+
Chrome for Android
Android WebView
3+
Samsung Internet
Opera Mobile
MDN
Attribute/maskContentUnits
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
IE
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
Attribute/maskUnits
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
IE
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
Element/mask
In all current engines.
Firefox
3+
Safari
3+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
12+
IE
Yes
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile