Question

我想使用image来控制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>

Here是一个显示当前输出的jsfiddle。这似乎是将亮度与填充色相结合。

Answer 1

你不想使用atop，它既可以渲染出来自brightnessToAlpha的可变不透明度的黑色形状，也可以渲染源图形。相反，您希望使用“in”运算符，该运算符仅渲染源图形，但使用来自brightnessToAlpha的alpha值作为alpha。您还需要颠倒“ins”的顺序。这可以满足您的需求。

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

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

1 个答案: