Search code examples
javascriptjqueryhtmljquery-svg

drawIntro undefined

I am using html5 on Windows 7 and am trying to use jQuery SVG described here.

It calls for the following line of code in the html file.

<script type="text/javascript">jQuery(function ($) {$('#svgintro').svg({onLoad: drawIntro});});</script>

However, this causes the JavaScript console to return the error message

ReferenceError: drawIntro is not defined

I have been unable to find a discussion about this error on the web or where it is suppoed to be defined.

Solution

  • You are missing a function drawIntro. It should look like below. I have just used the example code given in the page that you mentioned. This should work. The main problem was you didn't had defined a function. Just by copying the function might also work. Hope this helps

    <div id="svgintro"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$('#svgintro').svg({onLoad: drawIntro});
function drawIntro(svg) { 
    svg.circle(75, 75, 50, 
        {fill: 'none', stroke: 'red', strokeWidth: 3}); 
    var g = svg.group({stroke: 'black', strokeWidth: 2}); 
    svg.line(g, 15, 75, 135, 75); 
    svg.line(g, 75, 15, 75, 135); 
}
</script>