Я пытаюсь реализовать простое приложение для редактирования изображений с некоторыми основными функциями. В настоящее время я использую SVG в качестве холста и заполняю его фоновым изображением, поскольку мне потребуется возможность добавлять фигуры, текст и т. Д., С которыми, мне кажется, было бы легче работать, если я работаю с SVG.
Мой конкретный вопрос сейчас касается применения фильтров. В настоящее время я могу использовать фильтры CSS, чтобы применять эффекты (например, размытие, сепия) ко всему изображению. Однако я хочу добавить возможность разрешать пользователям рисовать область (аналогично слою в фотошопе), а затем применять фильтр только к этому. Пример того, что я имею в виду:
В этом примере мне нужна возможность применить фильтр только к двум нарисованным областям.
Текущая реализация:
Для рисования областей в настоящее время я создаю clipPath на основе нарисованного пути, а затем обрезаю изображение SVG на основе этого clipPath (чтобы он выглядел так, как будто нарисованный путь все еще является частью фонового изображения)
Выпуск:
Похоже, что CSS-фильтры нельзя применять к SVG-элементам, таким как изображение или прямоугольник. Может кто-нибудь порекомендовать потенциальную альтернативу для этого? Или, если вам известен лучший способ реализации такого рода редактора в целом, я был бы благодарен за любые ссылки.