如何在React Konva中设置滤镜实现SVG颜色修改？

问题原因 #

Konva内置滤镜的参数定义标准和CSS滤镜不同，直接套用CSS滤镜参数会得到不符合预期的颜色效果。你可以直接复用已有的CSS滤镜串，用两种方案实现和普通HTML元素完全一致的变色效果： #

方案说明 #

1. 无导出需求首选：直接应用CSS滤镜
   不需要修改Konva内部逻辑，直接给Konva渲染的canvas元素添加CSS样式，效果和普通HTML元素加滤镜完全一致。
2. 需导出画布首选：自定义Konva滤镜
   通过自定义滤镜调用Canvas原生filter属性，语法和CSS滤镜100%兼容，导出画布为图片时效果会被保留。

可运行React示例 #

首先安装依赖：
npm install react-konva konva use-image

示例组件代码：

import React, { useRef, useEffect } from 'react';
import { Stage, Layer, Image } from 'react-konva';
import useImage from 'use-image';

// 替换为你的黑色SVG资源地址
const SVG_URL = '/your-black-icon.svg';
// 直接使用你生成的滤镜参数
const TARGET_FILTER = 'invert(51%) sepia(81%) saturate(1433%) hue-rotate(195deg) brightness(100%) contrast(93%)';

const SvgColorModifier = () => {
  const [svgImg, status] = useImage(SVG_URL, 'anonymous');
  const imageRef = useRef(null);

  // 方案1实现：给canvas加CSS滤镜，无导出需求用这个
  useEffect(() => {
    if (!imageRef.current || status !== 'loaded') return;
    const stage = imageRef.current.getStage();
    const canvasEl = stage.content.querySelector('canvas');
    if (canvasEl) canvasEl.style.filter = TARGET_FILTER;
  }, [status]);

  // 方案2实现：自定义滤镜，有导出需求删除上面的useEffect，打开下面注释
  // const cssFilter = (imageData) => {
  //   const ctx = imageData.context;
  //   ctx.save();
  //   ctx.filter = TARGET_FILTER;
  //   ctx.drawImage(imageData.image, 0, 0, imageData.width, imageData.height);
  //   ctx.restore();
  // };

  if (status === 'loading') return <div>资源加载中</div>;
  if (status === 'failed') return <div>SVG加载失败</div>;

  return (
    <Stage width={500} height={500}>
      <Layer>
        <Image
          ref={imageRef}
          image={svgImg}
          x={150}
          y={150}
          width={200}
          height={200}
          // 方案2需要加下面这行属性
          // filters={[cssFilter]}
        />
      </Layer>
    </Stage>
  );
};

export default SvgColorModifier;

注意事项 #

• 跨域SVG需要配置对应的CORS头，否则会触发Canvas跨域限制导致加载失败
• 方案1的CSS滤镜效果不会跟随Konva的toDataURL()/toImage()导出，有导出需求请使用方案2

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