SVG clipping using javascript

You set the id of the <clippath> to clip, but then you set the clip-path="url(#clippath). You need to match the id attribute you set.

Demo: http://jsfiddle.net/uMe4s/7/

I've tersified some of your code (appending the element as soon as it was created, instead of at the end). This has no effect on the solution.

After a while of fiddling it turns out that SVG is very case-sensitive and the clippath element needs to be a clipPath element.

See working fiddle: http://jsfiddle.net/F4mq9/2/

Very strange that the static sample worked however.