Вложенный фильтр SVG делает белый прозрачным - PullRequest
Новая
       37

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

0 голосов
/ 06 ноября 2019

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

И я довольно далеко продвинулся в получении статической текстуры и применении ее к выводу насыщенной матрицы, для болеесм. 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, а затем слить, мне пришлось использовать другой оператор, и результирующий шум не унаследовал цвет от насыщенного фильтра.

1 Ответ

0 голосов
/ 06 ноября 2019

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

 <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>
...