jquery .svg('get')返回undefined

时间:2014-02-12 05:02:20

标签: jquery svg

JAVASCRIPT:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.svg.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            var svg = $('#svgContainer').svg('get'); 
            console.log(svg); //Returns 'undefined'
        });
    </script>

HTML:

<div id="svgContainer">

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="900px" height="300px" viewBox="0 0 900 300" enable-background="new 0 0 900 300" xml:space="preserve">
        <rect x="48" y="15" fill="#0071BC" width="259" height="259"/>
        <rect x="195" y="85" fill="#22B573" width="354" height="142"/>
        <rect x="498" y="21" opacity="0.5" fill="#D9E021" width="190" height="256"/>
        <rect x="606" y="45" fill="#0071BC" width="247" height="121"/>
    </svg>

</div>

知道为什么它没有返回任何东西?这是documentation,但没有多大帮助。 (我也尝试使用svg对象而不是内联)

2 个答案:

答案 0 :(得分:2)

在其他所有内容之前,使用SVG在jQuery对象上调用svg(),然后执行您想要的操作:

var svg = $('#svgContainer').svg(); 
console.log(svg.svg('get'));
// Logs SVG instance

JSBin

答案 1 :(得分:1)

这应该解决它(介绍here描述了这一点):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        $('#svgContainer').svg(); 
        var svg = $('#svgContainer').svg('get'); 
        console.log(svg); //Returns 'undefined'
    });
</script>