SVGGeometryElement.isPointInFill()

在此页

句法
范例
规范
浏览器兼容性
相关话题

SVGGeometryElement.isPointInFill() method determines whether a given point is within the fill 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 fill. The point argument is interpreted as a point in the local coordiante system of the element.

句法

boolean someElement.isPointInFill(DOMPointInit point);

参数

point: DOMPointInit interpreted as a point in the local coordiante system of the element.

返回值

A boolean indicating whether the given point is within the fill or not.

范例

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"/>
</svg>

JavaScript

var circle = document.getElementById('circle');
// Point not in circle
console.log('Point at 10,10:', circle.isPointInFill(new DOMPoint(10, 10)));
// Point in circle
console.log('Point at 40,30:', circle.isPointInFill(new DOMPoint(40, 30)));

结果

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'SVGGeometryElement.isPointInFill()' in that specification.	候选推荐	初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`isPointInFill`	Chrome Yes	Edge ≤79	Firefox 69	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android No	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
不支持
兼容性未知 ?

元数据

最后修改： Sep 4, 2019

在此页

句法

参数

返回值

范例

SVG

JavaScript

结果

规范

浏览器兼容性

图例

相关话题