在 SVG.js 问题中创建 SVG 文档？答案

【问题标题】：Creating an SVG Document in SVG.js issue?在 SVG.js 问题中创建 SVG 文档？
【发布时间】：2014-06-21 01:25:01
【问题描述】：

总的来说，我是 SVG.js 和 javascript 的新手，我正在查看 http://documentup.com/wout/svg.js#usage/svg-document 此处的文档，但遇到了一些问题。

Usage

Create a SVG document

Use the SVG() function to create a SVG document within a given html element:
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

所以我假设他们希望我们调用一个函数，所以我从 Three.js 中的一些混乱中收集到的是我需要做的事情

<script>
function SVG()
{
          //Use the SVG() function to create a SVG document within a given html             

        var draw = SVG('drawing').size(300, 300)
        var rect = draw.rect(100, 100).attr({ fill: '#f06' })
}
</script>

在body标签内。然而，这不起作用。当调用 SVG();我收到一个错误

Uncaught RangeError: Maximum call stack size exceeded (15:22:47:898 | error, javascript)
at SVG (:18:13)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)

如前所述，我还有其他方法可以做到这一点，但似乎最简单的方法是调用一个函数，但我再次不确定我是否正确地这样做。

我有 Java 方面的背景，刚从 JMonkeyEngine 的项目中走出来，所以我对编程并不陌生，但对我到底需要做什么感到困惑，因为文档非常模糊，似乎暗示您需要了解他们关于将代码放在何处的术语。

我还找到了一些其他库，例如 snap.svg、d3 和 raphael

http://d3js.org/

raphaeljs.com/ snapsvg.io/

我真的只是想创建一堆带边框的图片/彩色框（可互换，因此本质上是一个带有图像的框，然后可以关闭并显示为颜色），它们甚至可以响应鼠标在桌面和移动浏览器上单击并拖动。基本上不多，但似乎这些都具有相似的功能，只是编码感觉不同。

有什么建议吗？

谢谢大家！

【问题讨论】：

您有一个名为SVG 的函数，并且在该函数内部调用该函数...（永远），因此您收到超出堆栈大小的错误。
是的，明白了，我尝试将它从函数中删除并将其保留在外部并调用它但没有，我应该在函数内部放置一些东西还是他们在谈论 SVG('drawing' )?我还想我会切换到 d3，我非常喜欢那个库，并且认为它会运行得最好……或者快照……
张贴小提琴会有很大帮助。我们需要查看您实际在做什么，而不是您在上面发布的摘要。你还记得包含 SVG.js 吗？
stackoverflow.com/tags/svg.js/info有一个完整的你好世界
你的html中有id="drawing"的元素吗？

标签： svg d3.js raphael snap.svg svg.js

【解决方案1】：

正如 Nils 所说，这里有一个 Hello World 示例：https://stackoverflow.com/tags/svg.js/info

您还可以找到大量文档和示例来了解您需要做什么。

//Use the SVG() function to create a SVG document within a given html
var canvas = SVG(idOfElement)
// now an svg was created in the element with the id

// draw a rectangle
canvas.rect(100,100)

【讨论】：