New Pages: SVGGradientElement

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}}

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}}

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}}

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}}