SVGSVGElement: checkEnclosure() method
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
js
checkEnclosure(element, rect)
Parameters
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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGSVGElement__checkEnclosure |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
checkEnclosure |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.