The SVGGeometryElement.isPointInStroke()
method determines whether a given point is within the stroke shape of an element. Normal hit testing rules apply; the value of the pointer-events
property on the element determines whether a point is considered to be within the stroke. The point
argument is interpreted as a point in the local coordiante system of the element.
Syntax
boolean someElement.isPointInStroke(DOMPointInit point);
Parameters
- point
- A
DOMPointInit
interpreted as a point in the local coordinate system of the element.
Return value
A boolean indicating whether the given point is within the stroke or not.
Example
SVG
<svg viewBox="0 0 100 100" width="150" height="150"
xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="50" cy="50" r="45"
fill="white" stroke="black" stroke-width="10"/>
<circle cx="10" cy="10" r="5" fill="seagreen"/>
<circle cx="40" cy="30" r="5" fill="seagreen"/>
<circle cx="83" cy="17" r="5" fill="seagreen"/>
</svg>
JavaScript
var circle = document.getElementById('circle');
// Point not in circle
console.log('Point at 10,10:', circle.isPointInStroke(new DOMPoint(10, 10)));
// Point in circle but not stroke
console.log('Point at 40,30:', circle.isPointInStroke(new DOMPoint(40, 30)));
// Point in circle stroke
console.log('Point at 83,17:', circle.isPointInStroke(new DOMPoint(83, 17)));
Result
Specifications
Specification | Status | Comment |
Scalable Vector Graphics (SVG) 2The definition of 'SVGGeometryElement.isPointInStroke()' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isPointInStroke
|
Chrome
Full support Yes |
Edge
Full support ≤79 |
Firefox
Full support 69 |
IE
No support No |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
No support No |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
SVGGeometryElement.isPointInStroke() by Mozilla Contributors is licensed under CC-BY-SA 2.5.