W3cubDocs

/Web APIs

SVGSVGElement: checkEnclosure() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The checkEnclosure() method of the 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 pointer-events processing.

Syntax

checkEnclosure(element, rect)

Parameters

element: An Element representing the SVG graphics element to check.
rect: An SVGRect object that defines the rectangle to check against.

Return value

A boolean.

Examples

Checking if an Element is Enclosed in a Rectangle

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

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

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGSVGElement__checkEnclosure>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`checkEnclosure`	1	12	1.5–21	≤12.1	3	18	4–21	≤12.1	1	1.0	3	1