Code with svg.js not working in JSFiddle.com or my laptop

Question

Newbie to svg.js...

I first tried the example available at https://jsfiddle.net/wout/Vac2Q/ in safari on OS X and clicking run only makes the result pane white and then grey again. The code is here...

<div id="drawing"></div>

/* create an svg drawing */
var draw = SVG('drawing')

/* draw rectangle */
var rect = draw.rect(50,50).move(100,100).fill('#f09')

/* make rectangle jump and change color on mouse over */
rect.mouseover(function() {
    this.animate(1000, SVG.easing.elastic)
    .move(400 * Math.random(), 400 * Math.random())
    .rotate(-45 + 90 * Math.random())
    .fill({
        r: ~~(Math.random() * 255)
      , g: ~~(Math.random() * 255)
      , b: ~~(Math.random() * 255)
    })
})

/* write text at the back */
draw.text('svg.js playground\ntry to grab the rectangle!')
    .back()
    .fill('#ccc')
    .move('50%', '40%')
    .font({
        family: 'Source Sans Pro'
     , size: 18
     , anchor: 'middle'
    })

/* create clock */
draw.clock('15%').back().start().move('80%', '80%')

I then tried to run the same code on my laptop after properly linking to source CDN but it fails with error "svg.js:3741 Uncaught TypeError: Cannot read property 'nodeName' of null" on chrome on OS X.

It doesn't matter which browser i use. it still fails with same error. I tried to include the sag element under the div element, set 'drawing' as id of sag element in place of div element etc but doesn't help.

What is happening here? Is it a bug in svg.js?

can you try this: `var svgElement = document.querySelector('#drawing'); var draw = SVG(svgElement);` from their documentation: `The first argument can either be an id of the element or the selected element itself.` — AntonB, Apr 17 '16 at 16:01
Tried, i got an error further along saying `undefined is not an object(evaluating 'this.node.childNodes')` on line 3027 of svg.js — Ram, Apr 17 '16 at 16:04
try this https://jsfiddle.net/awkxLygv/1/ - I'm assuming the library is not loading correctly for you. — AntonB, Apr 17 '16 at 16:18
Where did you find the link to the example? The clock does not work for the new svg version. Wout is busy doing an update atm. However - does the code even reach the clock statement? — Fuzzyma, Apr 17 '16 at 16:32
Google search for 'svg examples'. No , it doesn't reach clock drawing. It fails at the `var draw = SVG('drawing')` code being processed by svg.js. The errors i see are in svg.js and not something i can fix. — Ram, Apr 17 '16 at 16:45
@AntonB, it worked in the JSFiddle. MY script loading code is ``. The debugger shows where exactly the code is failing in svg.js. Should i be using something else for correcting? — Ram, Apr 17 '16 at 17:46

score 1 · Accepted Answer · answered Apr 17 '16 at 16:46

1

I removed the clock since its not working with the latest svg.js version. Here is a corrected fiddle: https://jsfiddle.net/Vac2Q/6486/

And here some Code so I can submit the answer

see my code here ;)

answered Apr 17 '16 at 16:46

Fuzzyma

7,619
6
28
60

Fixed it. Did not use $(document).ready() so included jQuery and it worked. That was very dumb. Thanks people! Yes, the clock doesn't work. – Ram Apr 17 '16 at 17:55

Code with svg.js not working in JSFiddle.com or my laptop

1 Answers1