CODEWITHSUNDEEP
javascripthtmlsvg.js
Ram
Ram

Reputation: 325

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

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?

Upvotes: 0

Views: 1564

Answers (1)

Fuzzyma
Fuzzyma

Reputation: 8474

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

Upvotes: 1

Related Questions