javascript - easiest way to get path tag from user uploaded svg? - Stack Overflow

admin管理员组

文章数量:1418426

User uploads a svg file with html input element:

<input type="file" id="file-input" accept="image/svg+xml" onchange="handleFiles(this.files)">

What do I put in the handleFiles function to read the path tag inside the svg. I don't care about displaying the image, I just want to read the path tag for its data. Any ideas?

EDIT: So far I'm utilizing FileReader to get the image's data as follows:

function handleFiles(files){
    var reader = new FileReader();
    reader.onload = function(e) {
        var svgData = e.target.result;
    }
    reader.readAsDataURL(files[0]);
}

Now how would I get a path tag out of svgData? Is this the best way to do it?

EDIT2: Ok so I think I have a solution but it feels kind of hacky. It requires having an object tag with position:absolute; and opacity:0; because it won't load with display:none;. Here is the code:

function handleFiles(files){
    var obj = document.getElementById('svg-object');
    obj.data = URL.createObjectURL(files[0]);
    obj.onload = e => {
        URL.revokeObjectURL(obj.data);
        var path = obj.contentDocument.getElementsByTagName('path')[0];
        console.log(path);
    }
}

The previous code works, but is it the best solution?

User uploads a svg file with html input element:

<input type="file" id="file-input" accept="image/svg+xml" onchange="handleFiles(this.files)">

What do I put in the handleFiles function to read the path tag inside the svg. I don't care about displaying the image, I just want to read the path tag for its data. Any ideas?

EDIT: So far I'm utilizing FileReader to get the image's data as follows:

function handleFiles(files){
    var reader = new FileReader();
    reader.onload = function(e) {
        var svgData = e.target.result;
    }
    reader.readAsDataURL(files[0]);
}

Now how would I get a path tag out of svgData? Is this the best way to do it?

EDIT2: Ok so I think I have a solution but it feels kind of hacky. It requires having an object tag with position:absolute; and opacity:0; because it won't load with display:none;. Here is the code:

function handleFiles(files){
    var obj = document.getElementById('svg-object');
    obj.data = URL.createObjectURL(files[0]);
    obj.onload = e => {
        URL.revokeObjectURL(obj.data);
        var path = obj.contentDocument.getElementsByTagName('path')[0];
        console.log(path);
    }
}

The previous code works, but is it the best solution?

• javascript
• svg

Share Improve this question Follow edited May 1, 2019 at 23:05 anonymous noob asked May 1, 2019 at 21:57 anonymous noobanonymous noob 1,00711 gold badge99 silver badges1010 bronze badges 2

• You don't show any effort in researching this problem. Don't expect others to write you code for you. Have you even tried anything yet? – Wendelin Commented May 1, 2019 at 22:03
• updated my answer with a solution, just not sure if it's the best solution... – anonymous noob Commented May 1, 2019 at 23:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I woud use the DOMParser.

It parses html / svg / xml just like your browser would and returns a Document. In this case a SVGDocument because the MIME type is set to image/svg+xml.

function handleFiles(files){
    var reader = new FileReader();
    reader.onload = function(e) {
        var svgData = e.target.result;
        var parser = new DOMParser();
        var doc = parser.parseFromString(svgData, "image/svg+xml");
        var pathTags = doc.getElementsByTagName("path");
        //Do whatever you want with pathTags
    }
    reader.readAsText(files[0]);
}

//Example data
var svgData = 
`<svg class="icon  icon--plus" viewBox="0 0 5 5" xmlns="http://www.w3/2000/svg">
    <path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
</svg>`;
var parser = new DOMParser();
var doc = parser.parseFromString(svgData, "image/svg+xml");
var pathTags = doc.getElementsByTagName("path");
console.log(`Found ${pathTags.length} path tags`);
console.log(pathTags);

本文标签： javascripteasiest way to get path tag from user uploaded svgStack Overflow