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

How to detect the color of any position of an SVG area

本文关键字：区域 任何 位置 颜色 SVG 何检测 检测      更新时间：2023-09-26

在SVG区域(不是画布)中，我需要使用javascript确定特定坐标(x,y)位置的颜色。大致是这样的:

getColor (mySvgArea, x, y);

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

如果你被允许在一般坐标上读取颜色，它将重新打开隐私泄漏，所以你永远不会有办法在图像之外这样做。

图像方式是将SVG放在<image>标记中，然后将其加载到画布中。浏览器可以通过以下两种方式来防止隐私泄露:a)污染画布，这样一旦SVG数据加载到画布中(目前是Webkit)，您就无法从画布中读取数据;b)限制SVG图像功能，这样它们就不会通过禁用链接着色(Firefox)来泄露隐私。

已经有一个stackoverflow的答案与一个例子，显示复制SVG到画布。如果你用的是火狐浏览器，你就可以把颜色读掉了。

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

相关文章：