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尝试上面的示例代码，当我运行程序时，它什么也没显示

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

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创建形状

1 个答案: