如何使用javascript或jQuery从自身检索svg文件名或路径

时间:2016-11-22 13:58:49

标签: javascript jquery svg

请问有没有办法直接从文件本身获取svg文件的文件名,例如我有这个文件夹和文件

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

然后在我的索引页面中,我进行了ajax()调用,检索并附加了image.svg文件。

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

现在问题是我想为onclick文件触发svg事件,因为我有多个<svg> <script> $('svg').on('load', function(){ fileName = //get the file name or file path $(this).attr('onclick', 'myFunction('+fileName+')'); }) </script> </svg> 个文件。我想传递svg文件名或svg路径作为参数

myFunction()

所以我可以在索引文件中运行function myFunction(svg){ //functions here }

 public int getDayOfYear() { //This is library method
    return getChronology().dayOfYear().get(getMillis());
}

if(!getDayOfYear() <=365 ||!getDayOfYear() <=366) { //Considering leap year
System.out.println("It is not the end of year !!!");
}

关于如何做到这一点,请提出更好的建议吗?

2 个答案:

答案 0 :(得分:1)

您可以将$.get()调用包装在另一个函数中并将文件名作为参数传递,这样您就可以轻松地为多个svg文件执行此操作...

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

        svgNode.on("click", function() {
            myFunction(filename);
        });

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

getSvg("svgImgs/image.svg");
// get other svg files...

答案 1 :(得分:1)

从@Archer编写的内容来看,这是一种简短快捷的方法。您可以执行此操作,而不是将$.get()调用嵌套在函数中

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

    svgNode.on("click", function() {
        myFunction(filename);
    });

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

然后在myFunction()中,您只需获得传递的值

function myFunction(svg){
    console.log(svg);
}