javascript - 如何使用 snap.svg 创建线条 - s.line 不是函数

标签 javascript svg snap.svg

我正在尝试创建一条简单的线,但它没有将 s.line 注册为函数,而且我看不出我在这里做错了什么。我的代码贴在下面。谢谢!

<html>
<head>

    <style type="text/css">
    #svg{
        width: 700px;
        height: 700px;
        background-color: #ccc;
    }
    </style>
</head>
<body>
<div id="svg"></div>
<script src="snap.svg-min.js"></script>
<script>
    var s = Snap("#svg");
    var metric = 24;
    var ground = s.line(50,350,650,350);   

</script>
</body>

最佳答案

你必须在 <svg> 上画画元素,不是 <div>

<html>
<head>

    <style type="text/css">
    #svg{
        width: 700px;
        height: 700px;
        background-color: #ccc;
    }
    </style>
</head>
<body>
<svg id="svg"></svg>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>
    var s = Snap("#svg");
    var metric = 24;
    var ground = s.line(50,50,650,50);
    ground.attr({
      stroke: "red",
      strokeWidth: 10
    });

</script>
</body>

关于javascript - 如何使用 snap.svg 创建线条 - s.line 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37612092/

相关文章:

javascript - 在 Chrome 控制台中

javascript - 未捕获的类型错误 : Cannot read property 'position' of undefined (D3. JS)

flash - Adobe Animate Snap SVG 插件 - 大文件

javascript - Snap.svg - Matrix.add() 如何工作?

javascript - 使 gulpfile : getting an error when call gulp. 并行

javascript - 首次运行 Greasemonkey 脚本时执行函数

javascript - 单击以使用 jquery 或 javascript 打开新的 Segment

css - 反向 SVG 线条绘制动画

html - 停止 SVGZ 内的自动图像平滑

javascript - 了解 safari SVG 重绘错误修复。