Javascript 使用SVG图像边框制作交互式画布

我在使用“不规则”边框设计访问div中的元素时遇到问题

我的要求是在一个div的顶部有一个边框，上面有两个可点击的元素。div本身有一个画布来绘制任何东西

问题是，如果我需要使边框可见，那么我必须降低div的z索引，这将不再允许在画布中绘制。如果我使div的z索引更高，那么边界元素就会被截断

我试过边界图像，但它（1）使角落呈方形，（2）使这两个项目不可点击。因此，我有一个SVG，它包含边框和2个可单击的元素

（函数（）{
const canvas=document.getElementById（'signature-pad'）；
函数resizeCanvas（）{
const ratio=Math.max（window.devicePixelRatio | | 1,1）；
canvas.width=canvas.offsetWidth*比率；
canvas.height=canvas.offsetHeight*比率；
canvas.getContext（'2d'）.scale（比率，比率）；
}
window.onresize=调整画布大小；
调整画布的大小（）；
const signaturePad=新的signaturePad（画布{
backgroundColor:'red'//将图像保存为JPEG所必需；只能删除保存为PNG或SVG
});
})();
.container{
高度：500px；
宽度：409px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
img{
位置：绝对位置；
排名：0；
身高：100%；
z指数：1；
}
.容器：：之前{
显示：块；
内容：“；
位置：绝对位置；
宽度：计算（100%-3rem）；
高度：计算（100%-2rem）；
背景色：红色；
z指数：-1；
}
帆布{
宽度：计算（100%-3rem）；
高度：计算（100%-2rem）；
z指数：1；
}
使用
：：在
伪元素之前，您可以使用
z-index:-1在
容器中创建块

将
背景图像
（或使用
的前景，我选择了背景）应用到
.item


.container{
高度：500px；
宽度：409px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.容器：：之前{
显示：块；
内容：“；
位置：绝对位置；
宽度：计算（100%-3rem）；
高度：计算（100%-2rem）；
背景色：红色；
z指数：-1；
}
.项目{
背景尺寸：包含；
背景重复：无重复；
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

你好
使用
：：在
伪元素之前，您可以使用
z-index:-1在
容器中创建块

将
背景图像
（或使用
的前景，我选择了背景）应用到
.item


.container{
高度：500px；
宽度：409px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.容器：：之前{
显示：块；
内容：“；
位置：绝对位置；
宽度：计算（100%-3rem）；
高度：计算（100%-2rem）；
背景色：红色；
z指数：-1；
}
.项目{
背景尺寸：包含；
背景重复：无重复；
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

你好
只需设置
把你的
谢谢，但是当我试图在div中包含元素时，它不起作用，我已经编辑了这个问题以显示我想要的内容。容器内有一块画布，需要放在框架内。谢谢，但当我尝试在div中包含元素时，它不起作用，我已编辑了问题，以准确显示我的目标。容器内有一块画布，需要放在框架内。