Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Adam-Greenan opened this issue May 1, 2024 · 1 comment
Open

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

Adam-Greenan opened this issue May 1, 2024 · 1 comment

Comments

@Adam-Greenan
Copy link

Adam-Greenan commented May 1, 2024

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
Copy link
Member

lavrton commented May 2, 2024

Make online demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants