From 178630ac2e57afefc585624dc8cf2bc487294eb0 Mon Sep 17 00:00:00 2001
From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com>
Date: Sat, 4 Jan 2025 09:24:48 +0530
Subject: [PATCH] New Pages: SVGGradientElement (#37414)

---
 .../gradienttransform/index.md                | 46 +++++++++++++++++++
 .../svggradientelement/gradientunits/index.md | 44 ++++++++++++++++++
 .../web/api/svggradientelement/href/index.md  | 45 ++++++++++++++++++
 .../svggradientelement/spreadmethod/index.md  | 45 ++++++++++++++++++
 4 files changed, 180 insertions(+)
 create mode 100644 files/en-us/web/api/svggradientelement/gradienttransform/index.md
 create mode 100644 files/en-us/web/api/svggradientelement/gradientunits/index.md
 create mode 100644 files/en-us/web/api/svggradientelement/href/index.md
 create mode 100644 files/en-us/web/api/svggradientelement/spreadmethod/index.md

diff --git a/files/en-us/web/api/svggradientelement/gradienttransform/index.md b/files/en-us/web/api/svggradientelement/gradienttransform/index.md
new file mode 100644
index 000000000000000..a4c0be2b505ce30
--- /dev/null
+++ b/files/en-us/web/api/svggradientelement/gradienttransform/index.md
@@ -0,0 +1,46 @@
+---
+title: "SVGGradientElement: gradientTransform property"
+short-title: gradientTransform
+slug: Web/API/SVGGradientElement/gradientTransform
+page-type: web-api-instance-property
+browser-compat: api.SVGGradientElement.gradientTransform
+---
+
+{{APIRef("SVG")}}
+
+The **`gradientTransform`** read-only property of the {{domxref("SVGGradientElement")}} interface reflects the {{SVGAttr("gradientTransform")}} attribute of the given element.
+
+## Value
+
+An {{domxref("SVGAnimatedTransformList")}}.
+
+## Examples
+
+### Accessing the `gradientTransform` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <defs>
+    <linearGradient id="gradient3" gradientTransform="rotate(45)">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+  </defs>
+  <rect x="10" y="10" width="180" height="180" fill="url(#gradient3)" />
+</svg>
+```
+
+```js
+// Accessing the gradientTransform property
+const gradient = document.getElementById("gradient3");
+console.dir(gradient.gradientTransform.baseVal);
+// Output: SVGTransformList object
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/svggradientelement/gradientunits/index.md b/files/en-us/web/api/svggradientelement/gradientunits/index.md
new file mode 100644
index 000000000000000..721c9d911b1db62
--- /dev/null
+++ b/files/en-us/web/api/svggradientelement/gradientunits/index.md
@@ -0,0 +1,44 @@
+---
+title: "SVGGradientElement: gradientUnits property"
+short-title: gradientUnits
+slug: Web/API/SVGGradientElement/gradientUnits
+page-type: web-api-instance-property
+browser-compat: api.SVGGradientElement.gradientUnits
+---
+
+{{APIRef("SVG")}}
+
+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")}}.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}}.
+
+## Examples
+
+### Accessing the `gradientUnits` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <defs>
+    <linearGradient id="gradient1" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+  </defs>
+  <rect x="10" y="10" width="180" height="180" fill="url(#gradient1)" />
+</svg>
+```
+
+```js
+const gradient = document.getElementById("gradient1");
+console.log(gradient.gradientUnits.baseVal); // Output: 1 (SVG_UNIT_TYPE_USERSPACEONUSE)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/svggradientelement/href/index.md b/files/en-us/web/api/svggradientelement/href/index.md
new file mode 100644
index 000000000000000..895f4532b73f407
--- /dev/null
+++ b/files/en-us/web/api/svggradientelement/href/index.md
@@ -0,0 +1,45 @@
+---
+title: "SVGGradientElement: href property"
+short-title: href
+slug: Web/API/SVGGradientElement/href
+page-type: web-api-instance-property
+browser-compat: api.SVGGradientElement.href
+---
+
+{{APIRef("SVG")}}
+
+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.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}}.
+
+## Examples
+
+### Accessing the `href` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+    <linearGradient id="gradient2" href="#gradient1" />
+  </defs>
+  <rect x="10" y="10" width="180" height="180" fill="url(#gradient2)" />
+</svg>
+```
+
+```js
+const gradient = document.getElementById("gradient2");
+console.log(gradient.href.baseVal); // Output: "#gradient1"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/svggradientelement/spreadmethod/index.md b/files/en-us/web/api/svggradientelement/spreadmethod/index.md
new file mode 100644
index 000000000000000..c5e34a826cf15ee
--- /dev/null
+++ b/files/en-us/web/api/svggradientelement/spreadmethod/index.md
@@ -0,0 +1,45 @@
+---
+title: "SVGGradientElement: spreadMethod property"
+short-title: spreadMethod
+slug: Web/API/SVGGradientElement/spreadMethod
+page-type: web-api-instance-property
+browser-compat: api.SVGGradientElement.spreadMethod
+---
+
+{{APIRef("SVG")}}
+
+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.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}}.
+
+## Examples
+
+### Accessing the `spreadMethod` property
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <defs>
+    <linearGradient id="gradient2" spreadMethod="reflect">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="50%" stop-color="yellow" />
+      <stop offset="100%" stop-color="blue" />
+    </linearGradient>
+  </defs>
+  <rect x="10" y="10" width="180" height="180" fill="url(#gradient2)" />
+</svg>
+```
+
+```js
+const gradient = document.getElementById("gradient2");
+console.log(gradient.spreadMethod.baseVal); // Output: 2 (SVG_SPREADMETHOD_REFLECT)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}