Вложенный фильтр SVG делает белый прозрачным

Я экспериментирую с набором шумовых/статических текстур. Моя цель — создать текстуру, которая выглядит следующим образом: ЦЕЛЬ

И я продвинулся довольно далеко в получении статической текстуры и применении ее к выходу матрицы насыщения, для получения дополнительной информации см. 5-ю крайнюю правую полосу здесь

`<filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
    <feColorMatrix type="matrix" 
            values="-11 0 0 0 6
                    -11 0 0 0 6
                    -11 0 0 0 6
                    0 0 0 0 1" in="f1" result="f2" />
   <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
    <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="0" k2="1" k3="1" k4="0"/>
</filter>`

Однако вместо белой текстуры хотелось бы видеть Исходное изображение (т.е. розовый градиент на фото). Я подозреваю, что это как-то связано с преобразованием белых значений в альфу. Однако, когда я попытался сначала отфильтровать шум с помощью luminanceToAlpha, а затем объединить, мне пришлось использовать другой оператор, и полученный шум не наследовал цвет от фильтра насыщения.


person artforart    schedule 05.11.2019    source источник


Ответы (1)


Я думаю, вы ищете умножение, а не сложение - эта комбинация k лучше подходит для вашей feComposite/арифметики.

 <filter  x="0%" y="0%" width="100%" height="100%" id="noiseMatrix3" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.2" numOctaves="1" seed="2" />
  <feColorMatrix type="matrix" 
        values="-11 0 0 0 6
                                    -11 0 0 0 6     
                                    -11 0 0 0 6      
                                    0 0 0 0 1" in="f1" result="f2" />
  <feColorMatrix type="saturate" in="SourceGraphic" values=".6" result="f4"/>
  <feComposite in="f2" in2="f4" result="f5"  operator="arithmetic"  k1="1" k2="0" k3=".6" k4="0" />   

 </filter>
person Michael Mullany    schedule 06.11.2019