-
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: SVGFEImageElement (#37319)
- Loading branch information
Showing
5 changed files
with
208 additions
and
0 deletions.
There are no files selected for viewing
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: "SVGFEImageElement: height property" | ||
short-title: height | ||
slug: Web/API/SVGFEImageElement/height | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEImageElement.height | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`height`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. 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 feImage = document.querySelector("feImage"); | ||
const verticalSize = feImage.height; | ||
console.log(verticalSize.baseVal.value); // the `height` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEImageElement.width")}} | ||
- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) | ||
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |
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: "SVGFEImageElement: result property" | ||
short-title: result | ||
slug: Web/API/SVGFEImageElement/result | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEImageElement.result | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`result`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. | ||
|
||
It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. 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 `<feImage>` 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 feImageElement = document.querySelector("feImage"); | ||
const filterName = feImageElement.result; | ||
console.log(filterName.baseVa); // the filter's assigned name | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEImageElement.in1")}} | ||
- {{cssxref("custom-ident")}} data type | ||
- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) | ||
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |
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: "SVGFEImageElement: width property" | ||
short-title: width | ||
slug: Web/API/SVGFEImageElement/width | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEImageElement.width | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`width`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. 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 feImage = document.querySelector("feImage"); | ||
const horizontalSize = feImage.width; | ||
console.log(horizontalSize.baseVal.value); // the `width` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEImageElement.height")}} | ||
- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) | ||
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |
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: "SVGFEImageElement: x property" | ||
short-title: x | ||
slug: Web/API/SVGFEImageElement/x | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEImageElement.x | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`x`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. 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 feImage = document.querySelector("feImage"); | ||
const leftPosition = feImage.x; | ||
console.log(leftPosition.baseVal.value); // the `x` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEImageElement.y")}} | ||
- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) | ||
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |
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: "SVGFEImageElement: y property" | ||
short-title: "y" | ||
slug: Web/API/SVGFEImageElement/y | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEImageElement.y | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`y`** read-only property of the {{domxref("SVGFEImageElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feImage")}} element, which fetches image data from an external source and provides the pixel data as output. 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 feImage = document.querySelector("feImage"); | ||
const topPosition = feImage.y; | ||
console.log(topPosition.baseVal.value); // the `y` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEImageElement.x")}} | ||
- [SVG tutorial: Filter effects](/en-US/docs/Web/SVG/Tutorial/Filter_effects) | ||
- [SVG Filter primitive attributes](/en-US/docs/Web/SVG/Attribute#filters_attributes) | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |