javascript - webkit-filter 后获取元素背景色

Question

在初始颜色通过 CSS 上的 -webkit-filter 运行后，我试图从屏幕上的元素获取颜色。并将该颜色应用到另一个元素上。

HTML

   <div id="Div1" style="background-color: rgb(166,187,207);"></div>
   <br>
   <div id="Div2"></div>

CSS

  #Div1{
    height: 100px;
    width: 100px;
    -webkit-filter: saturate(5);
  }

Javascript

   var inDiv1 = document.getElementById("Div1");
   var dColorx = inDiv1.style.backgroundColor;

   var inDiv2 = document.getElementById("Div2");
   inDiv2.innerHTML += '<svg width="400" height="110">'+
                       '<rect width="300" height="100" '+
                       'style="fill:'+ dColorx +';'+
                       'stroke-width:3;stroke:rgb(0,0,0)"></svg>';

目前我需要 Div2 内部的矩形与 Div1 的颜色相同。

 Div1 default color rgb(166,187,207).
 Div1 post filter color rgb(94,199,255). <-- need to get this color

我还使用了在 stackoverflow 上找到的 RGB 到 HSL 转换器, 但是颜色差了很多。如果我说得不对，我深表歉意。我整晚都在努力让它工作。

如果有人能帮助我，我将不胜感激! 示例:http://jsfiddle.net/JfKEL/

Answer 1

不确定在准确应用滤镜后如何获得颜色，但您可以为 svg 元素使用相同的颜色并重新应用滤镜。您的 svg 输出将是这样的:

<svg width="400" height="110">
    <filter id="saturate">
        <feColorMatrix in="SourceGraphic" type="saturate" values="5" />
    </filter>
    <g filter="url(#saturate)">
        <rect width="300" height="100" '+ 'style="fill:'+ dColorx + '; stroke-width:3;stroke:rgb(0,0,0)">
    </g>
</svg>

Working jsFiddle