konva icon indicating copy to clipboard operation
konva copied to clipboard

Konva React Text - Cannot use SVG for text pattern

Open Adam-Greenan opened this issue 9 months ago • 1 comments

Description: Issue: We are encountering an issue where we cannot use SVGs as PatternFillImage for text objects in konva react.

Additional Information: We can successfully use SVGs for FillPatternImage on other shapes like Rectangles, but when applying to text, the text renders but the svg image behind does not load, causing the text to go black.

We are also using useImage from react-konva-utils to load the svg image correctly.

  const [image] = useImage(url);

  return (
    <Text 
        ...{props.textProps}
        text={"Lorum Ipsum"}
        fillPatternImage={image}
        fillPatternScale={{
          x: patternScale,
          y: patternScale,
        }}
        fillPatternRepeat="repeat" />
  );

Environment: "konva": "^9.2.0" "react-konva": "^18.2.10" "react": "^18.0.2" "react-konva-utils": "^1.0.5"

Adam-Greenan avatar May 01 '24 07:05 Adam-Greenan

Make online demo

lavrton avatar May 02 '24 19:05 lavrton