SVGGeometryElement: метод isPointInFill()

Базовая линия Широко поддерживается *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

Метод SVGGeometryElement.isPointInFill() определяет, находится ли заданная точка внутри заполненной области элемента. Применяются стандартные правила проверки попадания в область; значение свойства pointer-events элемента определяет, считается ли точка находящейся внутри заполненной области. Аргумент point интерпретируется как точка в локальной системе координат элемента.

Синтаксис

isPointInFill(point)

Параметры

point: Объект DOMPointInit, интерпретируемый как точка в локальной системе координат элемента.

Возвращаемое значение

Булево значение, указывающее, находится ли заданная точка внутри заполненной области или нет.

Примеры

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

JavaScript

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 = new DOMPoint(point[0], point[1]);
    isPointInFill = circle.isPointInFill(pointObj);
  } catch (e) {
    // Fallback for browsers that don't support DOMPoint as an argument
    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.style.cx = point[0];
  pointEl.style.cy = point[1];
  pointEl.style.r = 5;
  pointEl.style.fill = isPointInFill ? "seagreen" : "rgb(255 0 0 / 50%)";
  svg.appendChild(pointEl);
}

Результат

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInFill

Совместимость браузеров

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`isPointInFill`	33 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.	79 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.	69	20 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.	12	33 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.	79	20 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.	12	3.0	4.4.3 Элемент, для которого вызывается метод, должен быть в DOM; в противном случае этот метод всегда вернёт `false`.
`point_parameter_DOMPoint`	Нет	Нет	69	Нет	12	Нет	79	Нет	12	Нет	Нет

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInFill