Skip to content

Commit 178630a

Browse files
yashrajbhartiyashrajbharti
authored
New Pages: SVGGradientElement (#37414)
1 parent b5f56e7 commit 178630a

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎files/en-us/web/api/svggradientelement/gradienttransform/index.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: "SVGGradientElement: gradientTransform property"
3+
short-title: gradientTransform
4+
slug: Web/API/SVGGradientElement/gradientTransform
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGGradientElement.gradientTransform
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`gradientTransform`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("gradientTransform")}} attribute of the given element.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedTransformList")}}.
16+
17+
## Examples
18+
19+
### Accessing the `gradientTransform` property
20+
21+
```html
22+
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
23+
<defs>
24+
<linearGradient id="gradient3" gradientTransform="rotate(45)">
25+
<stop offset="0%" stop-color="red" />
26+
<stop offset="100%" stop-color="blue" />
27+
</linearGradient>
28+
</defs>
29+
<rect x="10" y="10" width="180" height="180" fill="url(#gradient3)" />
30+
</svg>
31+
```
32+
33+
```js
34+
// Accessing the gradientTransform property
35+
const gradient = document.getElementById("gradient3");
36+
console.dir(gradient.gradientTransform.baseVal);
37+
// Output: SVGTransformList object
38+
```
39+
40+
## Specifications
41+
42+
{{Specifications}}
43+
44+
## Browser compatibility
45+
46+
{{Compat}}

‎files/en-us/web/api/svggradientelement/gradientunits/index.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "SVGGradientElement: gradientUnits property"
3+
short-title: gradientUnits
4+
slug: Web/API/SVGGradientElement/gradientUnits
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGGradientElement.gradientUnits
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`gradientUnits`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("gradientUnits")}} attribute of the given element. It takes one of the `SVG_UNIT_TYPE_*` constants defined in {{domxref("SVGUnitTypes")}}.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedEnumeration")}}.
16+
17+
## Examples
18+
19+
### Accessing the `gradientUnits` property
20+
21+
```html
22+
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
23+
<defs>
24+
<linearGradient id="gradient1" gradientUnits="userSpaceOnUse">
25+
<stop offset="0%" stop-color="red" />
26+
<stop offset="100%" stop-color="blue" />
27+
</linearGradient>
28+
</defs>
29+
<rect x="10" y="10" width="180" height="180" fill="url(#gradient1)" />
30+
</svg>
31+
```
32+
33+
```js
34+
const gradient = document.getElementById("gradient1");
35+
console.log(gradient.gradientUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE)
36+
```
37+
38+
## Specifications
39+
40+
{{Specifications}}
41+
42+
## Browser compatibility
43+
44+
{{Compat}}

‎files/en-us/web/api/svggradientelement/href/index.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: "SVGGradientElement: href property"
3+
short-title: href
4+
slug: Web/API/SVGGradientElement/href
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGGradientElement.href
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`href`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("href")}} or {{SVGAttr("xlink:href")}} {{deprecated_inline}} attribute of the given element.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedString")}}.
16+
17+
## Examples
18+
19+
### Accessing the `href` property
20+
21+
```html
22+
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
23+
<defs>
24+
<linearGradient id="gradient1">
25+
<stop offset="0%" stop-color="red" />
26+
<stop offset="100%" stop-color="blue" />
27+
</linearGradient>
28+
<linearGradient id="gradient2" href="#gradient1" />
29+
</defs>
30+
<rect x="10" y="10" width="180" height="180" fill="url(#gradient2)" />
31+
</svg>
32+
```
33+
34+
```js
35+
const gradient = document.getElementById("gradient2");
36+
console.log(gradient.href.baseVal); // Output: "#gradient1"
37+
```
38+
39+
## Specifications
40+
41+
{{Specifications}}
42+
43+
## Browser compatibility
44+
45+
{{Compat}}

‎files/en-us/web/api/svggradientelement/spreadmethod/index.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: "SVGGradientElement: spreadMethod property"
3+
short-title: spreadMethod
4+
slug: Web/API/SVGGradientElement/spreadMethod
5+
page-type: web-api-instance-property
6+
browser-compat: api.SVGGradientElement.spreadMethod
7+
---
8+
9+
{{APIRef("SVG")}}
10+
11+
The **`spreadMethod`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("spreadMethod")}} attribute of the given element. It takes one of the `SVG_SPREADMETHOD_*` constants defined on this interface.
12+
13+
## Value
14+
15+
An {{domxref("SVGAnimatedEnumeration")}}.
16+
17+
## Examples
18+
19+
### Accessing the `spreadMethod` property
20+
21+
```html
22+
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
23+
<defs>
24+
<linearGradient id="gradient2" spreadMethod="reflect">
25+
<stop offset="0%" stop-color="red" />
26+
<stop offset="50%" stop-color="yellow" />
27+
<stop offset="100%" stop-color="blue" />
28+
</linearGradient>
29+
</defs>
30+
<rect x="10" y="10" width="180" height="180" fill="url(#gradient2)" />
31+
</svg>
32+
```
33+
34+
```js
35+
const gradient = document.getElementById("gradient2");
36+
console.log(gradient.spreadMethod.baseVal); // Output: 2 (SVG_SPREADMETHOD_REFLECT)
37+
```
38+
39+
## Specifications
40+
41+
{{Specifications}}
42+
43+
## Browser compatibility
44+
45+
{{Compat}}

0 commit comments

Comments
 (0)