-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New pages: SVGFEDisplacementMapElement API
- Loading branch information
Showing
5 changed files
with
208 additions
and
0 deletions.
There are no files selected for viewing
41 changes: 41 additions & 0 deletions
41
files/en-us/web/api/svgfedisplacementmapelement/height/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: "SVGFEDisplacementMapElement: height property" | ||
| short-title: height | ||
| slug: Web/API/SVGFEDisplacementMapElement/height | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGFEDisplacementMapElement.height | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`height`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| It reflects the {{SVGElement("feDisplacementMap")}} element's {{SVGAttr("height")}} filter primitive attribute. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| const feDisplacementMap = document.querySelector("feDisplacementMap"); | ||
| const verticalSize = feDisplacementMap.height; | ||
| console.log(verticalSize.baseVal.value); // the `height` value | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGFEDisplacementMapElement.width")}} | ||
| - {{domxref("SVGFEImageElement")}} API and {{SVGElement("feImage")}} element | ||
| - {{domxref("SVGFETurbulenceElement")}} API and {{SVGElement("feTurbulence")}} element | ||
| - CSS {{cssxref("blend-mode")}} data type | ||
| - CSS {{cssxref("mix-blend-mode")}} property |
44 changes: 44 additions & 0 deletions
44
files/en-us/web/api/svgfedisplacementmapelement/result/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| --- | ||
| title: "SVGFEDisplacementMapElement: result property" | ||
| short-title: result | ||
| slug: Web/API/SVGFEDisplacementMapElement/result | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGFEDisplacementMapElement.result | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`result`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. | ||
|
|
||
| It reflects the {{SVGElement("feDisplacementMap")}} element's {{SVGAttr("result")}} attribute. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element. | ||
|
|
||
| If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `<feDisplacementMap>` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedString")}}. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| const feDisplacementMapElement = document.querySelector("feDisplacementMap"); | ||
| const filterName = feDisplacementMapElement.result; | ||
| console.log(filterName.baseVa); // the filter's assigned name | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGFEDisplacementMapElement.in1")}} | ||
| - {{cssxref("custom-ident")}} data type | ||
| - {{domxref("SVGFEImageElement")}} API and {{SVGElement("feImage")}} element | ||
| - {{domxref("SVGFETurbulenceElement")}} API and {{SVGElement("feTurbulence")}} element | ||
| - CSS {{cssxref("blend-mode")}} data type | ||
| - CSS {{cssxref("mix-blend-mode")}} property |
41 changes: 41 additions & 0 deletions
41
files/en-us/web/api/svgfedisplacementmapelement/width/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: "SVGFEDisplacementMapElement: width property" | ||
| short-title: width | ||
| slug: Web/API/SVGFEDisplacementMapElement/width | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGFEDisplacementMapElement.width | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`width`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| It reflects the {{SVGElement("feDisplacementMap")}} element's {{SVGAttr("width")}} filter primitive attribute. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| const feDisplacementMap = document.querySelector("feDisplacementMap"); | ||
| const horizontalSize = feDisplacementMap.width; | ||
| console.log(horizontalSize.baseVal.value); // the `width` value | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGFEDisplacementMapElement.height")}} | ||
| - {{domxref("SVGFEImageElement")}} API and {{SVGElement("feImage")}} element | ||
| - {{domxref("SVGFETurbulenceElement")}} API and {{SVGElement("feTurbulence")}} element | ||
| - CSS {{cssxref("blend-mode")}} data type | ||
| - CSS {{cssxref("mix-blend-mode")}} property |
41 changes: 41 additions & 0 deletions
41
files/en-us/web/api/svgfedisplacementmapelement/x/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: "SVGFEDisplacementMapElement: x property" | ||
| short-title: x | ||
| slug: Web/API/SVGFEDisplacementMapElement/x | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGFEDisplacementMapElement.x | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`x`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| It reflects the {{SVGElement("feDisplacementMap")}} element's {{SVGAttr("x")}} filter primitive attribute value. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| const feDisplacementMap = document.querySelector("feDisplacementMap"); | ||
| const leftPosition = feDisplacementMap.x; | ||
| console.log(leftPosition.baseVal.value); // the `x` value | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGFEDisplacementMapElement.y")}} | ||
| - {{domxref("SVGFEImageElement")}} API and {{SVGElement("feImage")}} element | ||
| - {{domxref("SVGFETurbulenceElement")}} API and {{SVGElement("feTurbulence")}} element | ||
| - CSS {{cssxref("blend-mode")}} data type | ||
| - CSS {{cssxref("mix-blend-mode")}} property |
41 changes: 41 additions & 0 deletions
41
files/en-us/web/api/svgfedisplacementmapelement/y/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| --- | ||
| title: "SVGFEDisplacementMapElement: y property" | ||
| short-title: "y" | ||
| slug: Web/API/SVGFEDisplacementMapElement/y | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.SVGFEDisplacementMapElement.y | ||
| --- | ||
|
|
||
| {{APIRef("SVG")}} | ||
|
|
||
| The **`y`** read-only property of the {{domxref("SVGFEDisplacementMapElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| It reflects the {{SVGElement("feDisplacementMap")}} element's {{SVGAttr("y")}} filter primitive attribute value. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`. | ||
|
|
||
| ## Value | ||
|
|
||
| An {{domxref("SVGAnimatedLength")}}. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| const feDisplacementMap = document.querySelector("feDisplacementMap"); | ||
| const topPosition = feDisplacementMap.y; | ||
| console.log(topPosition.baseVal.value); // the `y` value | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - {{domxref("SVGFEDisplacementMapElement.x")}} | ||
| - {{domxref("SVGFEImageElement")}} API and {{SVGElement("feImage")}} element | ||
| - {{domxref("SVGFETurbulenceElement")}} API and {{SVGElement("feTurbulence")}} element | ||
| - CSS {{cssxref("blend-mode")}} data type | ||
| - CSS {{cssxref("mix-blend-mode")}} property |