如何测量SVG区域的输出颜色？

Question

Here is a simple codepen，它会在不透明的.5上绘制一个蓝色正方形，然后在其上面绘制一个红色正方形。中心的重叠区域为紫色。如何使用SVG属性或JavaScript调用测量该颜色？注意：合成可能很复杂，也涉及光栅图像，因此我正在寻找一种颜色选择器功能，而不是基于填充属性的计算。

<svg 
  width=200 height=200 viewbox="0 0 1000 1000" 
  style="float: left; border: 1px solid black">

  <g>
    <rect width=750 height=750 fill=blue transform="" />
    <rect width=750 height=750 fill=red  transform="translate(250,250)" opacity=0.5 />
  </g>

</svg>

Answer 1

根据上面的评论，一种解决方案是将其复制到画布中：

<meta name="viewport" content="width=device-width, initial-scale=1">

我根本不喜欢这种解决方案；浏览器本身可以访问颜色数据，这很愚蠢，我们必须跳过所有这些步骤，进行序列化，重新绘制等操作。

请注意，上述代码不可移植，因为它依赖于svg和canvas元素的硬编码ID。请参阅codepen以查看其工作情况。