Преобразование композиции холста в фильтр SVG - PullRequest
Новая
       32

Преобразование композиции холста в фильтр SVG

0 голосов
/ 29 марта 2020

Я пытаюсь создать svg фильтр для mimi c поведение этого фрагмента: 

context.globalCompositeOperation = 'color';
context.fillStyle = 'rgba(255,255,255,1)';
context.fill();

context.globalCompositeOperation = 'screen';
context.fillStyle = 'rgba(255,255,255,0.5)';
context.fill();

Я использовал этот фильтр: 

<filter id="demoFilter">
    <feBlend mode="color" in="SourceGraphic" flood-color="white" flood-opacity="1" result="out1"/>
    <feBlend mode="screen" in="out1" flood-color="white" flood-opacity="0.5" result="out2"/>
</filter>

Но конечный эффект отличается, как вы можете видеть здесь .

Любая помощь?

Спасибо за совет

1 Ответ

0 голосов
/ 30 марта 2020

Я нашел хорошую SVG площадку , очень полезную, чтобы понять, как работает svg-фильтр и быстро попробовать новые фильтры.

Мне удалось найти решение, используя feFlood для заполнения области требуемым цветом и альфа, и feBlend для определения режима композиции и состояния.

Здесь рабочий код фильтра: 

<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-color="#ffffff" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood"/>
    <feBlend mode="color" x="0%" y="0%" width="100%" height="100%" in="flood" in2="SourceGraphic" result="blend2"/>
    <feFlood flood-color="#ffffff" flood-opacity="0.5" x="0%" y="0%" width="100%" height="100%" result="flood1"/>
    <feBlend mode="screen" x="0%" y="0%" width="100%" height="100%" in="blend2" in2="flood1" result="blend3"/>
</filter>
...