Svg Elements Appears In Dom But Are Invisible On Screen

I try to draw a stave with SVG using Vexflow and Raphael.js and when I load the page the SVG elements appear in the DOM but they don't appear on the screen. I checked if there is a

Solution 1:

If you add SVG elements via JavaScript you must specify namespace 'http://www.w3.org/2000/svg' for each element.

example

path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

Solution 2:

The error was obvious, I put my svg tag inside a canvas tag (I just switched from canvas drawing to svg drawing) and it can't work in any browser.

The answer : Just change the canvas tag to a div tag and it works like a charm.