如何使用图像中的亮度来控制SVG中填充的不透明度

我想使用一个控件来控制SVG中填充的alpha通道

我想不出将SourceGraphic与alpha相结合的正确方法。以下是我现在拥有的：

<?xml version="1.0" encoding="UTF-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300">
    <defs>
       <filter id="FILTER_pencil" primitiveUnits="userSpaceOnUse" filterUnits="objectBoundingBox" width="100%" height="100%">
         <feImage result="result1" width="128" height="128" xlink:href="http://lightartpixel.com/FILTER_pencil.png"/>
         <feColorMatrix type="luminanceToAlpha" result="alpha" in="result1"/>
         <feComposite operator="atop" in="alpha" in2="SourceGraphic"></feComposite>
       </filter>
     </defs>
     <rect fill="#5d496a" stroke="#5d496a" filter="url(#FILTER_pencil)" width="100" height="100"/>
  </svg>

---

是一个显示当前输出的JSFIDLE。它似乎将亮度与填充颜色结合起来。

您不想使用Top，它可以渲染从亮度到Alpha的具有可变不透明度的黑色形状以及源图形。相反，您希望使用“in”操作符，该操作符仅渲染源图形，但使用从亮度到alpha的alpha值作为alpha。您还需要颠倒“ins”的顺序。这会让你得到你想要的

<feComposite operator="in" in2="alpha" in="SourceGraphic"></feComposite>

问题是它现在忽略了矩形的颜色，我希望颜色来自矩形填充，而alpha来自亮度贴图。我已经更新了提琴，所以矩形是红色的，以使这更清楚。。。再读一遍我的答案。您必须将in2更改为alpha，将in更改为SourceGraphic。