javascript - Cannot get Snap.svg to select the proper svg element in Rails -

i'm trying snap.svg work in rails project.

i have page foo.html.slim containing following code:

#svg-container   svg#apple height="1000" width="400" 

and in static_pages.js.coffee, have

svgelement = document.getelementbyid("apple") paper = snap(svgelement) circ = paper.circle(100, 100, 50) circ.attr   fill: "#ff0000"   stroke: "#0000ff"   strokewidth: 10 circ.drag() 

this doesn't render svg anywhere on page (the element isn't in html source anywhere); however, if add line in particular place so

svgelement = document.getelementbyid("apple") document.write("foo") # new line paper = snap(svgelement) circ = paper.circle(100, 100, 50) circ.attr   fill: "#ff0000"   stroke: "#0000ff"   strokewidth: 10 circ.drag() 

a red , blue circle gets drawn. problem is @ top of body of html rather in svg element should have selected. of note, if document.write("foo") line placed in different position in coffeescript file, circle doesn't drawn.

neither paper = snap("#apple") work instead of original code.

what proper way have svg circle drawn in existing svg element?

sounds you're trying access #apple before there. easiest solution wrap code needs #apple in document-ready handler, in coffeescript this:

$ ->   svgelement = document.getelementbyid("apple")   paper = snap(svgelement)   circ = paper.circle(100, 100, 50)   circ.attr     fill: "#ff0000"     stroke: "#0000ff"     strokewidth: 10   circ.drag() 

that's same $(function() { ... }) in javascript.