SVGFEGaussianBlurElement: edgeMode property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The edgeMode read-only property of the SVGFEGaussianBlurElement interface determines what color values to use when the blur needs to sample pixels beyond the edge of the input image. It reflects the edgeMode attribute of the given <feGaussianBlur> element.
Its value is one of the SVG_EDGEMODE_* constants defined on the SVGFEGaussianBlurElement interface.
Value
An SVGAnimatedEnumeration object. The baseVal property of this object contains one of the following values:
0-
Represents
SVG_EDGEMODE_UNKNOWN, which means that theedgeModeattribute has a value other than the predefined keywords. 1-
Represents
SVG_EDGEMODE_DUPLICATE, which means that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image. 2-
Represents
SVG_EDGEMODE_WRAP, which means that the input image is extended by taking the color values from the opposite edge of the image. 3-
Represents
SVG_EDGEMODE_NONE, which means that the input image is extended with pixel values of zero for the R, G, B, and A channels.
Examples
Accessing the edgeMode property
<svg
viewBox="0 0 200 200"
width="300"
height="300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect
x="20"
y="20"
width="160"
height="160"
fill="rebeccapurple"
filter="url(#blur-filter)" />
</svg>
<output></output>
We can access the edgeMode property to read the current value:
const gaussianBlur = document.querySelector("feGaussianBlur");
const log = document.querySelector("output");
if (gaussianBlur.edgeMode) {
// Default edgeMode for feGaussianBlur is "none" (3)
log.textContent = `edgeMode.baseVal: ${gaussianBlur.edgeMode.baseVal}`;
} else {
log.textContent = "edgeMode is not supported in this browser";
}
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfegaussianblurelement-edgemode |