SVG与Javascript混合

Question

嗨，我不知道如何将此javascript代码与svg文档混合使用。这是我要编写的代码：

  <?xml version="1.0" encoding="UTF-8"?>
<svg version="1.0" width="1000" height="1000" onload="xd()"  xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
function xd(){
var svgns = "http://www.w3.org/2000/svg",
        svg = document.createElementNS(svgns, "svg"),
        rectSize = 31,
        matrixSize = 15,
        matrixLimit = matrixSize - 1;
        speedMs = 250;
    svg.setAttributeNS(null, 'width', rectSize * matrixSize);
    svg.setAttributeNS(null, 'height', rectSize * matrixSize);
    svg.setAttributeNS(null, 'style', 'border: ' + rectSize + 'px solid #ccc;');
    document.body.appendChild(svg);
    var currentX = -1,
        currentY = 0,
        nextMoveX = 1,
        nextMoveY = 0,
        snakeL = 5,
        swipe = 0,
        rectArray = [];
        gameIsOver = false;

    function drawPoint(x, y) {
        var rect = [document.createElementNS(svgns, 'rect'), x, y];
        var rectObj = rect[0];
        rectObj.setAttributeNS(null, 'x', x * rectSize);
        rectObj.setAttributeNS(null, 'y', y * rectSize);
        rectObj.setAttributeNS(null, 'height', rectSize);
        rectObj.setAttributeNS(null, 'width', rectSize);
        rectObj.setAttributeNS(null, 'class', 'snake');
        rectArray.push(rect);
        svg.appendChild(rectObj);
        if (rectArray.length > snakeL) {
            svg.removeChild(rectArray[0][0]);
            rectArray.shift();
        }
    }
    function setApple() {
        var appleX = Math.floor((Math.random() * matrixSize)),  
            appleY = Math.floor((Math.random() * matrixSize));
        apple = [document.createElementNS(svgns, 'rect'), appleX, appleY];
        var thisApple = apple[0];
        thisApple.setAttributeNS(null, 'x', appleX * rectSize);
        thisApple.setAttributeNS(null, 'y', appleY * rectSize);
        thisApple.setAttributeNS(null, 'height', rectSize);
        thisApple.setAttributeNS(null, 'width', rectSize);
        thisApple.setAttributeNS(null, 'class', 'apple');
        svg.appendChild(thisApple);
    }
    function gameOver() {
        svg.setAttributeNS(null, 'class', 'game-over');
        clearInterval(timing);
        alert('GAME OVER!\nYour result is ' + snakeL + '!');
        gameIsOver = true;
        return;
    }
    var timing = setInterval(controllingSnake, speedMs);
    function controllingSnake() {
        var nextX = currentX + nextMoveX,
            nextY = currentY + nextMoveY;
        rectArray.forEach(function(element){
            if (nextX === element[1] && nextY === element[2]) {
                gameOver();
            };
        });
        if (nextY < 0 || nextY > matrixLimit || nextX < 0 || nextX > matrixLimit) {
            gameOver();
        }
        if (!gameIsOver) {
            if (currentX === apple[1] && currentY === apple[2]) {
                snakeL++;
                svg.removeChild(apple[0]);
                setApple();
            }
            drawPoint(nextX, nextY);
            currentX = nextX;
            currentY = nextY;
        }
    }
    function changeDirection(dirCode) {
        switch (dirCode) {
            case 37:
                if (nextMoveX !== 1) {
                    nextMoveX = -1;
                    nextMoveY = 0;
                }
                break;
            case 38:
                if (nextMoveY !== 1) {
                    nextMoveX = 0;
                    nextMoveY = -1; 
                }
                break;
            case 39:
                if (nextMoveX !== -1) {
                    nextMoveX = 1;
                    nextMoveY = 0;
                }
                break;
            case 40:
                if (nextMoveY !== -1) {
                    nextMoveX = 0;
                    nextMoveY = 1;  
                }
        }
    }

    setApple();
    }

    ]]>
</script>

</svg>

我想显示应该在svg文档中运行的脚本。我从以下站点获取了代码：https://www.tutorialspoint.com/svg/src/game.html 我尝试过将xd（）添加到onload，但仍然无法正常工作。我应该如何混合？几天之内，我很难理解javascript。