New Pages: SVGSVGElement

files/en-us/web/api/svgsvgelement/animationspaused/index.md

@@ -0,0 +1,81 @@
+---
+title: "SVGSVGElement: animationsPaused() method"
+short-title: animationsPaused()
+slug: Web/API/SVGSVGElement/animationsPaused
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.animationsPaused
+---
+
+{{APIRef("SVG")}}
+
+The `animationsPaused()` method of the {{domxref("SVGSVGElement")}} interface checks whether the animations in the SVG document fragment are currently paused.
+
+## Syntax
+
+```js-nolint
+animationsPaused()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A boolean. `true` if this SVG document fragment is in a paused state.
+
+## Examples
+
+### Checking if Animations are Paused
+
+```html
+<svg id="exampleSVG" width="200" height="100">
+  <circle cx="50" cy="50" r="30" fill="blue">
+    <animate
+      attributeName="cx"
+      from="50"
+      to="150"
+      dur="2s"
+      repeatCount="indefinite" />
+  </circle>
+</svg>
+
+<button id="pauseBtn">Pause/Resume Animations</button>
+<pre id="status"></pre>
+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const pauseButton = document.getElementById("pauseBtn");
+const statusDisplay = document.getElementById("status");
+
+function updateStatus() {
+  const isPaused = svgElement.animationsPaused();
+  statusDisplay.textContent = `Animations paused: ${isPaused}`;
+}
+
+pauseButton.addEventListener("click", () => {
+  if (svgElement.animationsPaused()) {
+    svgElement.unpauseAnimations();
+  } else {
+    svgElement.pauseAnimations();
+  }
+  updateStatus();
+});
+
+// Initialize the status display
+updateStatus();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.pauseAnimations()")}}
+- {{domxref("SVGSVGElement.unpauseAnimations()")}}

files/en-us/web/api/svgsvgelement/checkenclosure/index.md

@@ -0,0 +1,80 @@
+---
+title: "SVGSVGElement: checkEnclosure() method"
+short-title: checkEnclosure()
+slug: Web/API/SVGSVGElement/checkEnclosure
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.checkEnclosure
+---
+
+{{APIRef("SVG")}}
+
+The `checkEnclosure()` method of the {{domxref("SVGSVGElement")}} interface checks if the rendered content of the given element is entirely contained within the supplied rectangle.
+
+Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{SVGAttr("pointer-events")}} processing.
+
+## Syntax
+
+```js-nolint
+checkEnclosure(element, rect)
+```
+
+### Parameters
+
+- `element`
+  - : An {{domxref("Element")}} representing the SVG graphics element to check.
+- `rect`
+  - : An {{domxref("SVGRect")}} object that defines the rectangle to check against.
+
+### Return value
+
+A boolean.
+
+## Examples
+
+### Checking if an Element is Enclosed in a Rectangle
+
+```html
+<svg id="exampleSVG" width="200" height="200">
+  <rect
+    id="checkRect"
+    x="10"
+    y="10"
+    width="100"
+    height="100"
+    fill="none"
+    stroke="red" />
+  <circle id="targetElement" cx="50" cy="50" r="30" fill="blue" />
+</svg>
+<button id="checkEnclosureBtn">Check Enclosure</button>
+<pre id="result"></pre>
+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const checkRect = svgElement.getElementById("checkRect");
+const targetElement = svgElement.getElementById("targetElement");
+const resultDisplay = document.getElementById("result");
+
+document.getElementById("checkEnclosureBtn").addEventListener("click", () => {
+  const rect = svgElement.createSVGRect();
+  rect.x = checkRect.x.baseVal.value;
+  rect.y = checkRect.y.baseVal.value;
+  rect.width = checkRect.width.baseVal.value;
+  rect.height = checkRect.height.baseVal.value;
+
+  const isEnclosed = svgElement.checkEnclosure(targetElement, rect);
+  resultDisplay.textContent = `Is the circle enclosed in the rectangle? ${isEnclosed}`;
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.checkIntersection()")}}

files/en-us/web/api/svgsvgelement/checkintersection/index.md

@@ -0,0 +1,82 @@
+---
+title: "SVGSVGElement: checkIntersection() method"
+short-title: checkIntersection()
+slug: Web/API/SVGSVGElement/checkIntersection
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.checkIntersection
+---
+
+{{APIRef("SVG")}}
+
+The `checkIntersection()` method of the {{domxref("SVGSVGElement")}} interface checks if the rendered content of the given element intersects the supplied rectangle.
+
+Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in {{SVGAttr("pointer-events")}} processing.
+
+## Syntax
+
+```js-nolint
+checkIntersection(element, rect)
+```
+
+### Parameters
+
+- `element`
+  - : An {{domxref("Element")}} representing the SVG graphics element to check.
+- `rect`
+  - : An {{domxref("SVGRect")}} object that defines the rectangle to check against.
+
+### Return value
+
+A boolean.
+
+## Examples
+
+### Checking if an Element Intersects a Rectangle
+
+```html
+<svg id="exampleSVG" width="200" height="200">
+  <rect
+    id="checkRect"
+    x="10"
+    y="10"
+    width="100"
+    height="100"
+    fill="none"
+    stroke="red" />
+  <circle id="targetElement" cx="80" cy="80" r="50" fill="blue" />
+</svg>
+<button id="checkIntersectionBtn">Check Intersection</button>
+<pre id="result"></pre>
+```
+
+```js
+const svgElement = document.getElementById("exampleSVG");
+const checkRect = document.getElementById("checkRect");
+const targetElement = document.getElementById("targetElement");
+const resultDisplay = document.getElementById("result");
+
+document
+  .getElementById("checkIntersectionBtn")
+  .addEventListener("click", () => {
+    const rect = svgElement.createSVGRect();
+    rect.x = checkRect.x.baseVal.value;
+    rect.y = checkRect.y.baseVal.value;
+    rect.width = checkRect.width.baseVal.value;
+    rect.height = checkRect.height.baseVal.value;
+
+    const isIntersecting = svgElement.checkIntersection(targetElement, rect);
+    resultDisplay.textContent = `Does the circle intersect with the rectangle? ${isIntersecting}`;
+  });
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.checkEnclosure()")}}

files/en-us/web/api/svgsvgelement/createsvgangle/index.md

@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGAngle() method"
+short-title: createSVGAngle()
+slug: Web/API/SVGSVGElement/createSVGAngle
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGAngle
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGAngle()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGAngle")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGAngle()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGAngle")}} object, initialized to a value of `0` (unitless).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAngle")}}

files/en-us/web/api/svgsvgelement/createsvglength/index.md

@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGLength() method"
+short-title: createSVGLength()
+slug: Web/API/SVGSVGElement/createSVGLength
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGLength
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGLength()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGLength")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGLength()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGLength")}} object, initialized to a value of `0` (unitless)..
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGLength")}}

files/en-us/web/api/svgsvgelement/createsvgmatrix/index.md

@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGMatrix() method"
+short-title: createSVGMatrix()
+slug: Web/API/SVGSVGElement/createSVGMatrix
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGMatrix
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGMatrix()` method of the {{domxref("SVGSVGElement")}} interface creates a {{domxref("DOMMatrix")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGMatrix()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("DOMMatrix")}} object, initialized to the identity matrix.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrix", "SVGMatrix")}}

files/en-us/web/api/svgsvgelement/createsvgnumber/index.md

@@ -0,0 +1,37 @@
+---
+title: "SVGSVGElement: createSVGNumber() method"
+short-title: createSVGNumber()
+slug: Web/API/SVGSVGElement/createSVGNumber
+page-type: web-api-instance-method
+browser-compat: api.SVGSVGElement.createSVGNumber
+---
+
+{{APIRef("SVG")}}
+
+The `createSVGNumber()` method of the {{domxref("SVGSVGElement")}} interface creates an {{domxref("SVGNumber")}} object outside of any document trees.
+
+## Syntax
+
+```js-nolint
+createSVGNumber()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+An {{domxref("SVGNumber")}} object, initialized to `0`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGNumber")}}