如何将Photoshop彩色半色调效果转换为SVG滤镜？

我要把Photoshop里的半色调效果转成SVG滤镜，具体要求：

• 模拟PS「滤镜>像素化>彩色半色调」操作
• 4个通道全部设置为45度
• 网点半径控制在5-8之间

目前已经拿到操作步骤说明和处理前后的图片，但用现有方法做出来的半色调图缩放效果很差。查了SVG滤镜列表和半色调实现方案，没找到完全适配的方法。

我觉得feConvolveMatrix滤镜或许能实现阈值控制像素开关，但看不懂MDN文档，也不确定是不是适用。还找到一个能转成feConvolveMatrix的方案，但因为不熟悉这个滤镜和kernelMatrix属性，没法操作。

下面是我的两次尝试代码：

初始尝试代码 #

.hero-200__img {
    filter: url(#halftone);
}

<img class="hero-200__img" alt="Hero" width="1920" height="660" src="https://firefund-assets.s3.amazonaws.com/hero-200/hero-img-1920x660.jpg">

    <!--
    1. Color Halftone
    2. All 4 channels 45degrees
    3. Radius of the dots between 5-8
    -->
<svg viewBox="0 0 100 100" width="1920" height="660">
    <filter id="halftone">
        <!-- 转黑白 -->
        <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
        <!-- 45度通道 -->
        <feConvolveMatrix kernelMatrix="0.125 0 0
                                        0 0.125 0
                                        0 0 0.125"/>
        <!-- 生成网点 -->
        <feMorphology operator="dilate" radius="5"/>
    </filter>
</svg>

注：输入图已经是黑白，但保留饱和度调整步骤以防图片变更。我也考虑过用svg.js（尤其是svg.filter.js）通过JS辅助计算。

更新后的尝试代码 #

.hero-200__img {
    filter: url(#halftone);
}

<img class="hero-200__img" width="1920" height="660" src="https://firefund-assets.s3.amazonaws.com/hero-200/hero-img-1920x660.jpg">

<svg viewBox="0 0 1000 1000" width="1920" height="660">
    <filter id="halftone">
        <!-- 转黑白 -->
        <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>

        <!-- 45度通道设置 -->
        <feComponentTransfer>
            <feFuncR type="discrete" tableValues="0 0.2 0.4 0.6 0.8 1"/>
            <feFuncG type="discrete" tableValues="0 0.2 0.4 0.6 0.8 1"/>
            <feFuncB type="discrete" tableValues="0 0.2 0.4 0.6 0.8 1"/>
            <feFuncA type="discrete" tableValues="0 0.2 0.4 0.6 0.8 1"/>
        </feComponentTransfer>

        <!-- 生成网点 -->
        <feMorphology operator="dilate" radius="2"/>
    </filter>
</svg>

内容的提问来源于stack exchange，提问作者dotnetCarpenter