javascript - 如何检测 SVG 区域任意位置的颜色

Question

在 SVG 区域（不是画布）内，我需要使用 javascript 确定特定坐标（x，y）位置的颜色。总的来说是这样的：

getColor (mySvgArea, x, y);

Answer 1

通常在 html 中，如果链接被访问过，它们会以不同的颜色绘制。这样的事情当然在 SVG 中也是可能的，而且很久以前就意识到，如果你能弄清楚颜色是什么，那就是隐私泄露，并且付出了很多努力来修复它。

如果您被允许以一般坐标读取颜色，它将重新打开隐私泄漏，因此您将永远无法在图像之外执行此操作。

图像方式是将您的 SVG 放入<image>标签中，然后将其加载到画布中。浏览器可以通过以下两种方式防止隐私泄露像链接着色（Firefox）

已经有一个 stackoverflow 的答案，其中显示了将 SVG 复制到 canvas的示例。如果您使用 Firefox，则可以读取颜色。

Answer 2

我知道这是老话题，但根据您的情况还有另一种方法。使用 SVG，您可以获取一个元素Document.elementFromPoint，也可以通过隐藏顶部元素并elementFromPoint再次调用来获取所有底层元素。可以从那里获得颜色以及其他属性。它本身并没有真正为您提供颜色，但它比画布更快，并且在选定的情况下工作得很好。