konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

Konva React Text - Cannot use SVG for text pattern #1752

Open Adam-Greenan opened 2 months ago

Adam-Greenan commented 2 months ago

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"

lavrton commented 2 months ago

Make online demo