view raw
doggie brezy doggie brezy - 6 months ago 35
Javascript Question

How to retrieve svg file name or path from itself using javascript or jQuery

Please is there a possible way I can get the file name of an svg file directly from the file itself for example I have this folder and files

+mainFolder/ <!--Main Folder-->
+svgImgs/ <!--SVG image Folder-->
+image.svg <!--SVG image-->
+index.php <!--index page of Main Folder-->

Then in my index page I have this
call that retrieves and appends the

$.get('svgImgs/image.svg', null, function(data){
var svgNode = $('svg', data);
var docNode = document.adoptNode(svgNode[0]);
}, 'xml');

Now the issue is that I want to trigger an
event for the
files as I have multiple of them. and I want to pass the svg file name or svg path as the parameter

$('svg').on('load', function(){
fileName = //get the file name or file path
$(this).attr('onclick', 'myFunction('+fileName+')');

So I can run the
in my index file

function myFunction(svg){
//functions here

Please any better suggestion on how I can do this?


You can wrap the $.get() call in another function and pass the filename as a parameter, which will then allow you to do this for multiple svg files easily...

function getSvg(filename) {
    $.get(filename, null, function(data) {
        var svgNode = $('svg', data);

        svgNode.on("click", function() {

        var docNode = document.adoptNode(svgNode[0]);
    }, 'xml');

// get other svg files...