无法使用 snap svg 创建形状

Question

无法加载 snap svg：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="<%=request.getContextPath()%>/scripts/snap.svg.js"></script>
        <script src="<%=request.getContextPath()%>/scripts/prism.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/stylesheet.css">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/css/prism.css">
        <script>
            var s = Snap("#svg");
            var circle = s.circle(90, 120, 80);
            var square = s.rect(210, 40, 160, 160);
        </script>
    </head>
    <body>
        <svg id="svg"></svg>
    </body>
</html>

使用 netbeans 尝试上面的示例代码，当我运行程序时，它什么都不显示

检查控制台说：未捕获类型错误：无法读取属性 'circle' of null

Answer 1

您需要等到页面加载完成...尝试window.onload

window.onload = function() {
        var s = Snap("#svg");
        var circle = s.circle(90, 120, 80);
        var square = s.rect(210, 40, 160, 160);
}

jsfiddle

无法使用 snap svg 创建形状

Unable to create shapes using snap svg

snap.svg