-
Notifications
You must be signed in to change notification settings - Fork 22.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New pages: SVGFETurbulenceElement (#37447)
* New pages: SVGFETurbulenceElement * typ --------- Co-authored-by: wbamberg <[email protected]>
- Loading branch information
Showing
5 changed files
with
190 additions
and
0 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
files/en-us/web/api/svgfeturbulenceelement/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,37 @@ | ||
--- | ||
title: "SVGFETurbulenceElement: height property" | ||
short-title: height | ||
slug: Web/API/SVGFETurbulenceElement/height | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFETurbulenceElement.height | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`height`** read-only property of the {{domxref("SVGFETurbulenceElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feTurbulence")}} element, which allows the synthesis of artificial textures. 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 feTurbulence = document.querySelector("feTurbulence"); | ||
const verticalSize = feTurbulence.height; | ||
console.log(verticalSize.baseVal.value); // the `height` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFETurbulenceElement.width")}} |
40 changes: 40 additions & 0 deletions
40
files/en-us/web/api/svgfeturbulenceelement/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,40 @@ | ||
--- | ||
title: "SVGFETurbulenceElement: result property" | ||
short-title: result | ||
slug: Web/API/SVGFETurbulenceElement/result | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFETurbulenceElement.result | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`result`** read-only property of the {{domxref("SVGFETurbulenceElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}. | ||
|
||
It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feTurbulence")}} element, which allows the synthesis of artificial textures. 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 `<feTurbulence>` 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 feTurbulenceElement = document.querySelector("feTurbulence"); | ||
const filterName = feTurbulenceElement.result; | ||
console.log(filterName.baseVal); // the filter's assigned name | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFETurbulenceElement.in1")}} | ||
- {{cssxref("custom-ident")}} data type |
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,37 @@ | ||
--- | ||
title: "SVGFETurbulenceElement: width property" | ||
short-title: width | ||
slug: Web/API/SVGFETurbulenceElement/width | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFETurbulenceElement.width | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`width`** read-only property of the {{domxref("SVGFETurbulenceElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}. | ||
|
||
It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feTurbulence")}} element, which allows the synthesis of artificial textures. 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 feTurbulence = document.querySelector("feTurbulence"); | ||
const horizontalSize = feTurbulence.width; | ||
console.log(horizontalSize.baseVal.value); // the `width` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFETurbulenceElement.height")}} |
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,37 @@ | ||
--- | ||
title: "SVGFETurbulenceElement: x property" | ||
short-title: x | ||
slug: Web/API/SVGFETurbulenceElement/x | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFETurbulenceElement.x | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`x`** read-only property of the {{domxref("SVGFETurbulenceElement")}} 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("feTurbulence")}} element, which allows the synthesis of artificial textures. 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 feTurbulence = document.querySelector("feTurbulence"); | ||
const leftPosition = feTurbulence.x; | ||
console.log(leftPosition.baseVal.value); // the `x` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFETurbulenceElement.y")}} |
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: "SVGFETurbulenceElement: y property" | ||
short-title: "y" | ||
slug: Web/API/SVGFETurbulenceElement/y | ||
page-type: web-api-instance-property | ||
browser-compat: api.SVGFETurbulenceElement.y | ||
--- | ||
|
||
{{APIRef("SVG")}} | ||
|
||
The **`y`** read-only property of the {{domxref("SVGFETurbulenceElement")}} 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("feTurbulence")}} element, which allows the synthesis of artificial textures. 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 feTurbulence = document.querySelector("feTurbulence"); | ||
const topPosition = feTurbulence.y; | ||
console.log(topPosition.baseVal.value); // the `y` value | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{domxref("SVGFETurbulenceElement.x")}} | ||
- CSS {{cssxref("blend-mode")}} data type | ||
- CSS {{cssxref("mix-blend-mode")}} property |