SVGGeometryElement: isPointInFill() メソッド

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.

* Some parts of this feature may have varying levels of support.

isPointInFill() メソッドは、指定された点が要素の塗りつぶし図形内に存在するかどうかを判定します。point 引数は、要素のローカル座標系における点として解釈されます。

構文

isPointInFill(point)

引数

point

要素のローカル座標系で解釈される点を表すオブジェクト。これは、DOMPoint.fromPoint() と同じアルゴリズムを使用して、 DOMPoint オブジェクトに変換されます。

返値

指定された点が塗りつぶし領域内にあるかどうかを示す論理値。

例

SVG

html
<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="rgb(0 0 0 / 25%)"
    stroke="rgb(0 0 0 / 50%)"
    stroke-width="10" />
</svg>

JavaScript

js
const svg = document.getElementsByTagName("svg")[0];
const circle = document.getElementById("circle");
const points = [
  [10, 10],
  [40, 30],
  [70, 40],
  [15, 75],
  [83, 83],
];

for (const point of points) {
  let isPointInFill;

  try {
    const pointObj = { x: point[0], y: point[1] };
    isPointInFill = circle.isPointInFill(pointObj);
  } catch {
    // 引数として DOMPoint に対応していないブラウザーの代替処理
    const pointObj = svg.createSVGPoint();
    pointObj.x = point[0];
    pointObj.y = point[1];
    isPointInFill = circle.isPointInFill(pointObj);
  }

  console.log(`Point at ${point[0]},${point[1]}: ${isPointInFill}`);

  const pointEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );
  pointEl.cx.baseVal.value = point[0];
  pointEl.cy.baseVal.value = point[1];
  pointEl.r.baseVal.value = 5;
  const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
  if (isPointInFill) {
    pointEl.setAttribute("fill", "rgb(0 170 0 / 50%)");
    pointEl.setAttribute("stroke", "rgb(0 170 0)");
    pathEl.setAttribute("stroke", "rgb(0 170 0)");
    pathEl.setAttribute("d", `M ${point[0] - 5} ${point[1]} h 10 m -5 -5 v 10`);
  } else {
    pointEl.setAttribute("fill", "rgb(170 0 0 / 50%)");
    pointEl.setAttribute("stroke", "rgb(170 0 0)");
    pathEl.setAttribute("stroke", "rgb(170 0 0)");
    pathEl.setAttribute("d", `M ${point[0] - 5} ${point[1]} h 10`);
  }
  svg.append(pointEl, pathEl);
}

結果

仕様書

Specification

Scalable Vector Graphics (SVG) 2
# __svg__SVGGeometryElement__isPointInFill

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年8月18日 by MDN contributors.

View this page on GitHub • Report a problem with this content

SVGGeometryElement: isPointInFill() メソッド

In this article

Help improve MDN