如何在 konva 中使用从 React Component 导入的 svg 和 use-image？答案

【问题标题】：How to use svg imported from React Component with use-image in konva?如何在 konva 中使用从 React Component 导入的 svg 和 use-image？
【发布时间】：2023-01-03 12:49:49
【问题描述】：

如何在konva中使用use-image从React Component导入的svg？

我尝试从 Component 导入 svg，但它没有任何效果，也没有返回任何错误。从 .svg 文件导入的相同 svg 代码效果很好，但我想传递道具以在 svg 中显示，所以我必须以这种方式执行此操作。 :)

邮票.js

const Stamp = () => {
    return (
        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="120" height="120" />
        </svg>
    );
};

export default Stamp;

画布.js

import useImage from 'use-image';
import Stamp from 'components/Stamp';

const Canvas = () => {
    const PlaceStamp = () => {
        const [image] = useImage(Stamp);
        return <Image image={image} x={position.x} y={position.y} />;
    };

    return (
        <Stage
            width={width}
            height={height}
            ref={konvaRef}
            onClick={() => {
                handleClick();
                IsDirty(true);
            }}
            onTap={() => {
                handleClick();
                IsDirty(true);
            }}>
            <Layer>
                {dirty && <PlaceStamp />}
            </Layer>
        </Stage>
    )
}

【问题讨论】：

标签： reactjs svg konva

【解决方案1】：

我试着做同样的事情。（感谢有机会在 stack-overflow 上注册一个帐户，哈哈）

我知道这不是直接的解决方案。您可能已经研究过以下内容： enter link description here

我认为如果您尝试从“react-konva-utils”导入并嵌入我们在本官方文档中使用的 SVG，它会起作用

【讨论】：