当在正确设置了 z-index 的浏览器上显示文本时，html2canvas 不会在 SVG 上渲染文本

Question

我正在使用

html2canvas

来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有

MaterialUI's Typography

和普通

<h1>

标签，z-index 设置为更高的值。当我下载图像时，但是文本没有出现。

令人惊讶的是，当我将自定义 SVG 对象的不透明度设置为 0.5 时，我可以看到仍然存在的文本。我相信这可能是 z-index 没有正确应用的情况。

请提供任何建议！代码块如下。 海报

<Box
                sx={{
                    zIndex: 5,
                    justifyContent: "flex-start",
                    backgroundColor: "rgba(0, 0, 0, 0)",
                    width: "90%",
                    height: "35%",
                    padding: "1rem",
                    marginTop: "800px",
                    overflow: "hidden",
                }}
            >
                <h1 
                    >
                    {donationDetails.startDate}
                </h1>
                <Typography
                    color="white"
                    variant="h1"
                    gutterBottom
                    sx = {{zIndex: 5000}}
                    >
                    {donationDetails.startDate}
                </Typography>
                <Typography
                    color="white"
                    variant="h2"
                    gutterBottom
                    >
                    {donationDetails.name}
                </Typography>
                <Typography
                    color="white"
                    variant="h3"
                    gutterBottom
                    >
                    {donationDetails.location}
                </Typography>
                <Typography
                    color="white"
                    variant="h3"
                    gutterBottom
                    >
                    {donationDetails.donationItems}
                </Typography>

            </Box>
            <BasicOutline
                style={{
                    position: "absolute",
                    zIndex: 1,
                }}
            />

手柄下载代码

    const handleDownload = () => {
        const box = document.getElementById('poster-box');
        if (!box) return;
        html2canvas(box)
            .then(canvas => {
                const dataURL = canvas.toDataURL();
                const link = document.createElement('a');
                link.href = dataURL;
                link.download = 'poster.png';
                link.click();
            });
    };

Answer 1

通过在此链接

此处

添加position:relative

解决了这个问题

            <Box
                sx={{
                    justifyContent: "flex-start",
                    backgroundColor: "rgba(0, 0, 0, 0)",
                    width: "90%",
                    height: "35%",
                    padding: "1rem",
                    marginTop: "800px",
                    overflow: "hidden",
                    zIndex: "5000",
                    **position:"relative"**
                }}
            >