Improve SVGGeometryElement#{isPointInFill,isPointInStroke} examples

[xBZZZZ]

changed pages:

• https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInFill
• https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInStroke

---

• changed examples:
  • don't use pointEl.style.r, pointEl.style.cx, pointEl.style.cy because they don't exist in firefox
  • don't use isPointInFill variable that is not declared in https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInStroke#javascript
  • use { x: point[0], y: point[1] } instead of new DOMPoint(point[0], point[1]) to show that object class doesn't matter in browsers that support Accepts a DOMPoint as point parameter
  • look different to see region where fill and stroke overlap
• changed DOMPoint→DOMPointInit in parameters

---

What does 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. mean?
Adding pointer-events="none" or style="pointer-events:none" to big circle has no effect.

[github-actions]

Preview URLs

• /en-US/docs/Web/API/SVGGeometryElement/isPointInFill
• /en-US/docs/Web/API/SVGGeometryElement/isPointInStroke

(comment last updated: 2025-02-02 20:01:45)

[Josh-Cena]

@xBZZZZ Are you going to complete this soon?

[xBZZZZ]

@xBZZZZ Are you going to complete this soon?

when this question (duplicate of first comment) gets answered:

What does 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. mean?
Adding pointer-events="none" or style="pointer-events:none" to big circle has no effect.

https://jsbin.com/kopefuzace/1/edit?html,js,output
https://github.com/orgs/mdn/discussions/737

[Josh-Cena]

I looked into this question. Apparently it was in the old spec: w3c/svgwg#416, but then pointer-events no longer impacts these two properties in around 2018, before all other browsers ship it, and Chrome never had pointer-events affecting these two methods. So we can safely remove them.

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	const pathEl = document.createElementNS(
	"http://www.w3.org/2000/svg",
	"path",
	);
	const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

[xBZZZZ]

what about

  const pointEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );

?

[Josh-Cena]

@xBZZZZ It's because the pathEl declaration is shorter by a few characters, so it fits into an 80-character line, but pointEl does not.

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	const pathEl = document.createElementNS(
	"http://www.w3.org/2000/svg",
	"path",
	);
	const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

[Josh-Cena]

The new examples are a huge improvement in every way. Thank you! I just pushed a little change to avoid mentioning DOMPointInit, because we don't document dictionaries on MDN.