SOURCE

let svg = document.getElementById('mySvg'); // 获取SVG容器
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute('d', 'M10 10 L90 90');
path.setAttribute('stroke', 'red');
path.setAttribute('stroke-width', '2');
path.setAttribute('fill', 'none');
svg.appendChild(path);

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 'c') {
        console.log('Ctrl + C was pressed');
    }
    if (event.shiftKey && event.key === 'Enter') {
        console.log('Shift + Enter was pressed');
    }
});

// 监听全局的click事件
document.addEventListener('click', function(event) {
    console.log(`Element clicked: ${event.target.tagName}`);
});

// 监听指定元素的mouseenter事件
const box = document.getElementById('box');
box.addEventListener('mouseenter', function() {
    console.log('Mouse entered the box.');
});

// 监听鼠标滚轮滚动事件
window.addEventListener('wheel', function(event) {
    console.log(`Scrolling with delta: ${event.deltaY}`);
});

<svg id="mySvg" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 50 H 90 V 80 L200  200 " fill="none" stroke="blue" stroke-width="5"/>
  <path d="M200 200 A50 50 0 1 0 250 250" fill="none" stroke="blue" stroke-width="5"/>
  <path d="M300 300 Q 350 400 500 500" fill="none" stroke="blue" stroke-width="5"/>
</svg>

svg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(0, 255, 242);
	cursor: pointer;
	filter:sepia(20%);
}