JQuery .svg ('получить') возвращает неопределенное

Question

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 объекта вместо встроенного)

Answer 1

Прежде всего остального, вызовите svg() на объект JQuery с SVG, а затем делать то, что вы хотите:

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

JSBin.

Answer 2

Это должно исправить это (введение 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>