konva
konva copied to clipboard
Konva React Text - Cannot use SVG for text pattern
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"
Make online demo