未捕获的 ReferenceError：函数未在 SVGLoad 上定义

Question

我不知道为什么会发生这种情况，但是当我有：

<svg xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 30 20"
 onload="makeDraggable(evt)">
 </svg>

我收到此错误：

Uncaught ReferenceError: makeDraggable is not defined
    onSVGLoad

但是当我将其更改为：

    <svg xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 30 20"
 onload="makeDraggable(evt)">
<script type="text/javascript">
</script>
</svg>

错误消失了。

更新这是我的完整 html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Garden Tracker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="toolbar">
        <button onclick="startCreatingField()">+</button>
        <button onclick="finishCreatingField()">tick</button>
    </div>
    
    <svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 width height" id="garden-map" onload="makeDraggable(evt)">
    <script type="text/javascript"> //THIS IS WERE THE ERROR HAPPENS
    </script>
    <polygon class="draggable" fill="#ffa500" points="169 156 174 182 150 170 126 182 131 156 112 138 138 134 150 110 162 134 188 138"/> //JUST FOR TEST
</svg>
</body>
<script src="magic.js"></script>
</html>

Answer 1

在浏览器遇到 makeDraggable 之后，magic.js 的加载就来了。

将<script>移动到<head>以便它首先加载。