このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
SVGGeometryElement: isPointInFill() メソッド
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
isPointInFill() メソッドは、指定された点が要素の塗りつぶし図形内に存在するかどうかを判定します。point 引数は、要素のローカル座標系における点として解釈されます。
構文
js
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);
}
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInFill |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。