将画布组成转换为SVG过滤器

2024-05-20 • 问答

我正在尝试创建一个svg filter来模仿此代码段的行为：

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

context.globalCompositeOperation = 'screen';
context.fillStyle = 'rgba(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>

但是最终效果与您看到的here不同。

有帮助吗？

感谢您的咨询

我发现了一个不错的SVG playground，对于理解svg-filter的工作原理和快速尝试新的过滤器非常有用。

我能够找到一种解决方案，使用feFlood用期望的颜色和alpha填充区域，并使用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>

将画布组成转换为SVG过滤器

skfywj 回答：将画布组成转换为SVG过滤器

大家都在问