-
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.
- 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: "SVGFEBlendElement: height property" | ||
short-title: height | ||
slug: Web/API/SVGFEBlendElement/height | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEBlendElement.height | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`height`** read-only property of the {{domxref("SVGFEBlendElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGElement("feBlend")}} 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. | ||
|
||
The `<feBlend>` SVG filter blends two input images together using commonly used imaging software {{cssxref("blend-mode", "blending modes")}}. | ||
|
||
## Value | ||
|
||
An {{domxref("SVGAnimatedLength")}}. | ||
|
||
## Example | ||
|
||
```js | ||
const feBlend = document.querySelector("feBlend"); | ||
const verticalSize = feBlend.height; | ||
console.log(verticalSize.baseVal.value); // the `height` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEBlendElement.width")}} | ||
- 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,45 @@ | ||
--- | ||
title: "SVGFEBlendElement: result property" | ||
short-title: result | ||
slug: Web/API/SVGFEBlendElement/result | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEBlendElement.result | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`result`** read-only property of the {{domxref("SVGFEBlendElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. | ||
|
||
It reflects the {{SVGElement("feBlend")}} element's {{SVGAttr("result")}} attribute. | ||
The `<feBlend>` SVG filter blends two input images together using commonly used imaging software {{cssxref("blend-mode", "blending modes")}}. | ||
|
||
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 `<feBlend>` 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 feBlendElement = document.querySelector("feBlend"); | ||
const filterName = feBlendElement.result; | ||
console.log(filterName.baseVa); // the filter's assigned name | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEBlendElement.in")}} | ||
- {{cssxref("custom-ident")}} data type | ||
- 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: "SVGFEBlendElement: width property" | ||
short-title: width | ||
slug: Web/API/SVGFEBlendElement/width | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEBlendElement.width | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`width`** read-only property of the {{domxref("SVGFEBlendElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGElement("feBlend")}} 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. | ||
|
||
The `<feBlend>` SVG filter blends two input images together using commonly used imaging software {{cssxref("blend-mode", "blending modes")}}. | ||
|
||
## Value | ||
|
||
An {{domxref("SVGAnimatedLength")}}. | ||
|
||
## Example | ||
|
||
```js | ||
const feBlend = document.querySelector("feBlend"); | ||
const horizontalSize = feBlend.width; | ||
console.log(horizontalSize.baseVal.value); // the `width` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEBlendElement.height")}} | ||
- 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,39 @@ | ||
--- | ||
title: "SVGFEBlendElement: x property" | ||
short-title: x | ||
slug: Web/API/SVGFEBlendElement/x | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEBlendElement.x | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`x`** read-only property of the {{domxref("SVGFEBlendElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGElement("feBlend")}} 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 feBlend = document.querySelector("feBlend"); | ||
const leftPosition = feBlend.x; | ||
console.log(leftPosition.baseVal.value); // the `x` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEBlendElement.y")}} | ||
- 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,42 @@ | ||
--- | ||
title: "SVGFEBlendElement: y property" | ||
short-title: "y" | ||
slug: Web/API/SVGFEBlendElement/y | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFEBlendElement.y | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`y`** read-only property of the {{domxref("SVGFEBlendElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGElement("feBlend")}} element's {{SVGAttr("y")}} filter primitive attribute value. | ||
The `<feBlend>` SVG filter blends two input images together using commonly used imaging software {{cssxref("blend-mode", "blending modes")}}. | ||
|
||
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 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 feBlend = document.querySelector("feBlend"); | ||
const topPosition = feBlend.y; | ||
console.log(topPosition.baseVal.value); // the `y` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFEBlendElement.x")}} | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |