将CSS过滤器应用于图像中的选定区域

Question

我正在尝试实现一个具有一些基本功能的简单图像编辑应用程序。我目前正在使用SVG作为画布，并在其中填充背景图片，因为我需要能够添加形状，文本等的功能，如果使用SVG，我认为使用它们会更容易。

我现在的具体问题是关于应用过滤器。我目前可以使用CSS滤镜将效果（例如，模糊，棕褐色）应用于整个图像。但是，我想添加一种功能，允许用户绘制区域（类似于photoshop中的图层），然后仅对此应用滤镜。我的意思示例：

在此示例中，我需要能够仅对绘制的两个区域应用过滤器。

当前实施： 为了绘制区域，我目前正在基于绘制的路径创建一个clipPath，然后基于该clipPath裁剪svg图像（使其看起来像绘制的路径仍是背景图像的一部分）

问题： 似乎CSS过滤器无法应用于SVG元素（例如图像或矩形）。有人可以推荐一个潜在的替代方法吗？或者，如果您知道总体上可以实现这种编辑器的更好方法，我将不胜感激。