From 6649ad24fc5e3ee2dfe9bcfb61f1df473dc5c24b Mon Sep 17 00:00:00 2001
From: yashrajbharticybtekk <y.bharti@cybtekk.com>
Date: Sat, 21 Dec 2024 09:05:32 +0530
Subject: [PATCH 1/2] New Pages: SVGPatternElement pattern interfaces

---
 .../patterncontentunits/index.md              | 64 +++++++++++++++++++
 .../patterntransform/index.md                 | 52 +++++++++++++++
 .../svgpatternelement/patternunits/index.md   | 60 +++++++++++++++++
 3 files changed, 176 insertions(+)
 create mode 100644 files/en-us/web/api/svgpatternelement/patterncontentunits/index.md
 create mode 100644 files/en-us/web/api/svgpatternelement/patterntransform/index.md
 create mode 100644 files/en-us/web/api/svgpatternelement/patternunits/index.md

diff --git a/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md b/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md
new file mode 100644
index 000000000000000..970fc8f040f2a13
--- /dev/null
+++ b/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md
@@ -0,0 +1,64 @@
+---
+title: "SVGPatternElement: patternContentUnits property"
+short-title: patternContentUnits
+slug: Web/API/SVGPatternElement/patternContentUnits
+page-type: web-api-instance-property
+browser-compat: api.SVGPatternElement.patternContentUnits
+---
+
+{{APIRef("SVG")}}
+
+The **`patternContentUnits`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternContentUnits")}} attribute of the given {{SVGElement("pattern")}} element. It specifies the coordinate system for the pattern content and takes one of the constants defined in {{domxref("SVGUnitTypes")}}.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}} object.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern
+      id="pattern1"
+      width="10"
+      height="10"
+      patternContentUnits="userSpaceOnUse">
+      <circle cx="5" cy="5" r="5" fill="blue" />
+    </pattern>
+    <pattern
+      id="pattern2"
+      width="10"
+      height="10"
+      patternContentUnits="objectBoundingBox">
+      <circle cx="5" cy="5" r="5" fill="red" />
+    </pattern>
+  </defs>
+  <rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
+  <rect x="100" y="0" width="100" height="100" fill="url(#pattern2)" />
+</svg>
+```
+
+We can access the `patternContentUnits` attribute:
+
+```js
+const patterns = document.querySelectorAll("pattern");
+
+console.log(patterns[0].patternContentUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE)
+console.log(patterns[1].patternContentUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedEnumeration")}}
+- {{domxref("SVGUnitTypes")}}
diff --git a/files/en-us/web/api/svgpatternelement/patterntransform/index.md b/files/en-us/web/api/svgpatternelement/patterntransform/index.md
new file mode 100644
index 000000000000000..a3334a45c501fc5
--- /dev/null
+++ b/files/en-us/web/api/svgpatternelement/patterntransform/index.md
@@ -0,0 +1,52 @@
+---
+title: "SVGPatternElement: patternTransform property"
+short-title: patternTransform
+slug: Web/API/SVGPatternElement/patternTransform
+page-type: web-api-instance-property
+browser-compat: api.SVGPatternElement.patternTransform
+---
+
+{{APIRef("SVG")}}
+
+The **`patternTransform`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternTransform")}} attribute of the given {{SVGElement("pattern")}} element. This property holds the transformation applied to the pattern itself, allowing for operations like `translate`, `rotate`, `scale`, and `skew`.
+
+## Value
+
+An {{domxref("SVGAnimatedTransformList")}} object, which contains the list of transformations applied to the pattern.
+
+## Example
+
+In this example, the pattern is rotated by 20 degrees, skewed on the X-axis by 30 degrees, and scaled by a factor of 1 horizontally and 0.5 vertically:
+
+```html
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Apply a transform on the tile -->
+  <pattern
+    id="p1"
+    width=".25"
+    height=".25"
+    patternTransform="rotate(20)
+                      skewX(30)
+                      scale(1 0.5)">
+    <circle cx="10" cy="10" r="10" />
+  </pattern>
+
+  <!-- Apply the transformed pattern tile -->
+  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+</svg>
+```
+
+{{EmbedLiveSample("Examples", '100%', 300)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedEnumeration")}}
+- {{domxref("SVGUnitTypes")}}
diff --git a/files/en-us/web/api/svgpatternelement/patternunits/index.md b/files/en-us/web/api/svgpatternelement/patternunits/index.md
new file mode 100644
index 000000000000000..ef257df8031bed0
--- /dev/null
+++ b/files/en-us/web/api/svgpatternelement/patternunits/index.md
@@ -0,0 +1,60 @@
+---
+title: "SVGPatternElement: patternUnits property"
+short-title: patternUnits
+slug: Web/API/SVGPatternElement/patternUnits
+page-type: web-api-instance-property
+browser-compat: api.SVGPatternElement.patternUnits
+---
+
+{{APIRef("SVG")}}
+
+The **`patternUnits`** read-only property of the {{domxref("SVGPatternElement")}} interface reflects the {{SVGAttr("patternUnits")}} attribute of the given {{SVGElement("pattern")}} element. It specifies the coordinate system for the pattern content and takes one of the constants defined in {{domxref("SVGUnitTypes")}}.
+
+## Value
+
+An {{domxref("SVGAnimatedEnumeration")}} object.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="pattern1" width="10" height="10" patternUnits="userSpaceOnUse">
+      <circle cx="5" cy="5" r="5" fill="blue" />
+    </pattern>
+    <pattern
+      id="pattern2"
+      width="10"
+      height="10"
+      patternUnits="objectBoundingBox">
+      <circle cx="5" cy="5" r="5" fill="red" />
+    </pattern>
+  </defs>
+  <rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
+  <rect x="100" y="0" width="100" height="100" fill="url(#pattern2)" />
+</svg>
+```
+
+We can access the `patternUnits` attribute:
+
+```js
+const patterns = document.querySelectorAll("pattern");
+
+console.log(patterns[0].patternUnits.baseVal); // output: 1 (SVGUnitTypes.USERSPACEONUSE)
+console.log(patterns[1].patternUnits.baseVal); // output: 2 (SVGUnitTypes.OBJECTBOUNDINGBOX)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedEnumeration")}}
+- {{domxref("SVGUnitTypes")}}

From f9dba06bae05c856ae170c9a7c499c1d4385c24d Mon Sep 17 00:00:00 2001
From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com>
Date: Sat, 21 Dec 2024 09:08:41 +0530
Subject: [PATCH 2/2] Update index.md

---
 files/en-us/web/api/svgpatternelement/patterntransform/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/svgpatternelement/patterntransform/index.md b/files/en-us/web/api/svgpatternelement/patterntransform/index.md
index a3334a45c501fc5..4c8c82cb8d7391b 100644
--- a/files/en-us/web/api/svgpatternelement/patterntransform/index.md
+++ b/files/en-us/web/api/svgpatternelement/patterntransform/index.md
@@ -12,7 +12,7 @@ The **`patternTransform`** read-only property of the {{domxref("SVGPatternElemen
 
 ## Value
 
-An {{domxref("SVGAnimatedTransformList")}} object, which contains the list of transformations applied to the pattern.
+An {{domxref("SVGAnimatedTransformList")}} object.
 
 ## Example