Geek asks and answers

Download external SVG documents using jQuery SVG plugin

Could you share working examples like:

  • upload an external SVG document with its resource link (script / style)
  • load an SVG document from an object tag contained in the same host document

using jQuery SVG plugin? I have problems with the source on the project page: for example.

var SVG = $("#wrapper").svg('get');
SVG.load('external.svg', { addTo:true });

declares that the SVG container is undefined.

The following works, but the resources referenced in the svg file do not load:

$("#wrapper").svg({
    onLoad: function(){
        var svg = $("#wrapper").svg('get');
        svg.load('external.svg', {addTo:true});
    },
    settings: {}
}

These are external CSS stylesheets and scripts. Related images are displayed correctly:

<!-- not applied -->
<?xml-stylesheet href="styles/common.css" type="text/css"?>
<svg>
  <!-- not loaded -->
  <script xlink:href="scripts/common.js" />
  <!-- o.k. -->
  <image xlink:href="images/test.png" />
</svg>
+3
source share
2 answers

This script seems to work for me:

    function drawIntro(svg) { 

    svg.load('lion.svg', {addTo: true, changeSize: true});

}
$().ready(function(){
$('#svgphone').svg({onLoad: drawIntro});

}); //$().ready(function()
0
source

Try using jQuery hack Create and access SVG tag using jQuery?

Or $("#svgphone").css({'background-image': "url(external.svg)"});

0
source

More articles:


All Articles