0

I am new to SVG.js and javascript in general, and I was going over the documentation here http://documentup.com/wout/svg.js#usage/svg-document and was having some issues.

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' })

so I was assuming from this they want us to call a function so what I've gathered from messing around a little in Three.js is that I need to do

<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>

within the body tag. This doesn't work however. When calling SVG(); I get an error 

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)

There are other ways I can do it as mentioned, but it seems that the easiest method would be to call a function, but again I'm not sure if I'm doing this correctly.

I have a background in Java, just getting off of a project with JMonkeyEngine, so I'm not new to programming, but confused with what exactly I need to do with this, since the documentation is extremely vague and seems to suggest that you need to understand their terminology as to where to put the code.

I have also found a few other librarieslike snap.svg, d3, and raphael

http://d3js.org/

raphaeljs.com/ snapsvg.io/

I'm really just trying to create a bunch of pictures/colored boxes (interchangable so essentially a box with an image that can then be turned off and be displayed as a color) with borders, that can respond to mouse even of clicking and dragging around on desktop and mobile browsers. Essentially not much, but it seems like these all have similar features just a different coding feel.

Any advice?

Thank you everyone!

XaolingBao
  • 1,034
  • 1
  • 18
  • 34
  • You have a function called `SVG`, and inside that function call that function ... (forever), so you're getting the error of a stack size exceeded. – WiredPrairie May 04 '14 at 20:44
  • Yeah, gotcha, I tried removing it from the function and keeping it outside and calling it but nothing, am I supposed to put something inside of the function or they were talking about the SVG('drawing')? I also think I am going to be switching to d3, I like that library a lot and think it will work out best... that or snap... – XaolingBao May 05 '14 at 00:41
  • Posting a fiddle would help a lot. We need to see what you are actually doing rather than the summary you are posting above. Are you remembering to include SVG.js? – Paul LeBeau May 05 '14 at 03:33
  • There is a complete hello world at http://stackoverflow.com/tags/svg.js/info – Nils May 05 '14 at 04:50
  • do you have an element with `id="drawing"` in your html? – jshanley May 05 '14 at 15:23

1 Answers1

0

As said by Nils, there is a Hello World example here: https://stackoverflow.com/tags/svg.js/info

You also find plenty of documentation and examples to see what you have to do.

//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)
Fuzzyma
  • 7,619
  • 6
  • 28
  • 60