javascript - SVG() 在 JSFiddle 中返回 null

Question

我想学习一些 SVG，尽管 JSFiddle 是使用它的完美场所。我收到初始 SVG('whatever') 调用返回的 null 。这是我遗漏/做错的事情，还是 JSFiddle 有问题？

这是 fiddle : https://jsfiddle.net/85gsveLd/

这是我的 HTML:

<div id='canvas'><div>

还有 JS:

if(document.readyState === 'complete') {
  initialize()
}
else {
  window.addEventListener('load', initialize)
}

function initialize() {
  var draw = SVG('drawing').size(300,300)
  var rect = draw.rect(100, 100)
}

错误:

Uncaught TypeError: Cannot read property 'size' of null

注意，我将 svg.js v3.0.13 作为依赖项链接。

更新:我的代码基于旧版本 svgjs 的工作 JSFiddle 示例。因此，将旧代码与新 svgjs 版本一起使用导致了我的错误。这里的教训是始终确保您的代码针对您尝试使用的库的正确版本。

Answer 1

您需要在 jsfiddle 的资源中使用 https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.13/svg.js 才能使用 SVG(...)

然后 var draw = SVG().addTo('#canvas').size(300, 300)