New Pages: SVGPatternElement pattern interfaces (#37323)

mdn · Dec 30, 2024 · c82c597 · c82c597
1 parent 4027961
commit c82c597
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 0 deletions.
diff --git a/files/en-us/web/api/svgpatternelement/patterncontentunits/index.md 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
@@ -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.
+
+## 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
@@ -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")}}