javascript - SVG-Pan-Zoom on DOM Object tag not working -

javascript - SVG-Pan-Zoom on DOM Object tag not working -

i have <object> load external svg file:

<object type="image/svg+xml" data="system.svg" id="graph_container" class="graphcontainmentarea"> browser not back upwards svg </object>

i using svg pan , zoom functionality of next library: https://github.com/ariutta/svg-pan-zoom. however, adding svg-pan-zoom.js file page seems not sufficient in adding kind of functionality svg contained in object code:

<?xml version="1.0" encoding="utf-8"?> <iw:iwidget id="graphcontainer" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns:iw="http://www.ibm.com/xmlns/prod/iwidget" supportedmodes="view edit" lang="en" iscope="graphcontainerscope" title="graph container widget"> <iw:content mode="view"> <![cdata[ <link rel="stylesheet" href="/widgets/graphcontainerwidget/css/graphcontainer.css" /> <script src="/widgets/graphcontainerwidget/js/jquery.min.js"></script> <div id="graphcontainer_iwid_" class="search-area" style="display:block;"> <div class="content-area" id="content-area_iwid_"> <div class="rightpanel" id="rightpanel_iwid_"> <table id='main-content_iwid_' class="links-included"> <tr> <object type="image/svg+xml" data="" id="_iwid_graph_container" class="graphcontainmentarea"> browser not back upwards svg </object> </tr> <tr><td></td></tr> <tr><td></td></tr> <tr> <td id="_iwid_graph_footer" class="footercontainmentarea">optional footer</td> </tr> </table> <div id='footer_iwid_' class="footer"> </div> </div> </div> </div> <script src="/widgets/graphcontainerwidget/js/svg-pan-zoom.js"></script> <script type="text/javascript"> var _iwid_attributesitemset = icontext.getiwidgetattributes(); var _iwid_idescriptor = icontext.getidescriptor(); var svg_graph_url = _iwid_attributesitemset.getitemvalue("wid_import_field"); var svg_footer = _iwid_attributesitemset.getitemvalue("wid_footer_field"); var svg_multi = _iwid_attributesitemset.getitemvalue("wid_multigraphs_field"); console.log("viewmode src url: " + svg_graph_url); seek { if (svg_graph_url !== null && svg_graph_url !== "") { var finished_url = httpcheck() + svg_graph_url; $("#graph_container").attr("data", finished_url); settimeout(function() { svgpanzoom("#_iwid_graph_container", { zoomenabled: true, controliconsenabled: true }); }, 2000); } else { alert("no url passed graph container!") } } catch(e) { console.log(e.name + "-" + e.description + "-" + e.message); } function httpcheck() { if (svg_graph_url.substring(0,7) == "http://" || svg_graph_url.substring(0,8) == "https://") { homecoming ""; } else { homecoming "http://"; } } </script> ]]> </iw:content>

note: jquery library i'm using other svg-pan-zoom.js tips on how can address issue/improve code? current error svgpan not defined.

above code updated

it hard determine cause of problem, because illustration may not reproduced.

note: tested "svg-pan-zoom" on application , worked normally.

possible reasons problem:

svg , your page requires work in "same domain" or back upwards "cors".

you using "file uri scheme", causes problem secure in "web browser"

can problem in time clone repository.

solutions

for problem cross-origin (cors) read link: https://developer.mozilla.org/en-us/docs/web/http/access_control_cors

for problem "file uri", recommend install "xampp" (apache , php) , "node.js" utilize "http localhost"

for problems "git download" need either git clone --recursive git@github.com:ariutta/svg-pan-zoom.git or if cloned it, git submodule update --init --recursive

example width "data uri"

note: work in firefox, because in chrome "data uri scheme" no sends "origin header"

note: work in chrome utilize "http uri scheme" load svg

note: used "data uri" because jsfiddle don't back upwards send "resources"

<script src="svg-pan-zoom.js"></script> <object type="image/svg+xml" id="svgid" data="data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wij8+cjxzdmcgd2lkdgg9iji2niigagvpz2h0psixnzeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyi+cia8is0tienyzwf0zwqgd2l0acbnzxrob2qgrhjhdyatigh0dha6ly9naxrodwiuy29tl2r1b3bpegvsl01ldghvzc1ecmf3lyatlt4kidxnpgogidx0axrszt5iywnrz3jvdw5kpc90axrszt4kica8cmvjdcbmawxspsijzmzmiibpzd0iy2fudmfzx2jhy2tncm91bmqiighlawdodd0imtcziib3awr0ad0imjy4iib5psitmsiged0ilteilz4kica8zybkaxnwbgf5psjub25liibvdmvyzmxvdz0idmlzawjszsiget0imciged0imcigagvpz2h0psixmdaliib3awr0ad0imtawjsigawq9imnhbnzhc0dyawqipgogica8cmvjdcbmawxspsj1cmwoi2dyawrwyxr0zxjuksigc3ryb2tllxdpzhropsiwiib5psiwiib4psiwiibozwlnahq9ijewmcuiihdpzhropsixmdalii8+ciagpc9npgogpc9npgogpgc+ciagphrpdgxlpkxhewvyide8l3rpdgxlpgogidxyzwn0iglkpsjzdmdfncigagvpz2h0psi2ncigd2lkdgg9ije1my45otk5otyiihk9ijqwiib4psi0myigb3bhy2l0et0imc41iibmawxslw9wywnpdhk9im51bgwiihn0cm9rzs1vcgfjaxr5psjudwxsiibzdhjva2utd2lkdgg9ijeunsigc3ryb2tlpsijmdawiibmawxspsijzmzmii8+cia8l2c+cjwvc3znpg=="> browser not back upwards svg or not loaded (work in gecko - firefox) </object> <script> window.onload = function() { svgpanzoom("#svgid", { zoomenabled: true, controliconsenabled: true }); }; </script>

online example: http://jsfiddle.net/l4u6ap2w/

javascript svg svgpanzoom