Question

我收到以下错误：

TypeError: $(...).svg is not a function
[Break On This Error]   

$('#svgbasics').svg({onLoad: drawIntro});

代码：

<html>
    <head>
        <title>SVG</title>
<style type="text/css">
    #svgbasics { width: 400px; height: 300px; border: 1px solid #484; }


</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.7/jquery-1.4.4.js"></script>

    </head>
    <body>
        <div id="svgbasics"></div>


<script type="text/javascript">

/* Only works on the red box!*/
var getXY = function(elem) {
    var x = Number(elem.getAttribute('x')),
        y = Number(elem.getAttribute('y')),
        w = Number(elem.getAttribute('width')),
        h =  Number(elem.getAttribute('height'));
    return {x:x+ w/2, y:y+h/2};
}

$(document).ready(function(){

    $('#svgbasics').svg({onLoad: drawIntro});

});

function drawIntro(svg) {


    var r1 = svg.rect(20,10,100,50, {fill:'#666'});
    var r2 = svg.rect(200,100,100,50, {fill:'red'});
    var r1xy = getXY(r1);
    var r2xy = getXY(r2);

    var g = svg.group({stroke: 'black', strokeWidth: 2});
    var con = svg.line(g,
            r1xy.x, r1xy.y,
            r2xy.x, r2xy.y, {strokeWidth: 5}); 

    $(r2)
      .draggable()
      .bind('mousedown', function(event, ui){

      })
      .bind('drag', function(event, ui){
        xy = getXY(this);
        con.setAttribute('x2', xy.x);
        con.setAttribute('y2', xy.y);
        event.target.setAttribute('x', ui.position.left);
        event.target.setAttribute('y', ui.position.top);
      });
}


</script>
    </body>
</html>

Answer 1

$('#svgbasics').svg( {onLoad: drawIntro} );是无效的jQuery，除非你使用的是一些你没有提到过的插件。

svg()不是jQuery库的一部分。您必须包含一个扩展jQuery函数的插件，以包含svg()函数。（ ref： https://github.com/kbwood/svg/issues/7）

尝试使用

$('#svgbasics').load('Sample.svg');

参考： External SVG file is NOT getting loaded using JQuery

TypeError：$（...）。svg不是函数

1 个答案: