Самый простой способ получить тег пути от загруженного пользователем SVG?

Question

Пользователь загружает файл svg с элементом ввода html:

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

Что я добавлю в функцию handleFiles, чтобы прочитать тег пути внутри svg.Меня не волнует отображение изображения, я просто хочу прочитать тег пути для его данных.Любые идеи?

РЕДАКТИРОВАТЬ: До сих пор я использую FileReader для получения данных изображения следующим образом:

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

Теперь, как бы я получить тег пути из svgData?Это лучший способ сделать это?

РЕДАКТИРОВАТЬ 2: Хорошо, так что я думаю, что у меня есть решение, но оно кажется немного хакерским.Требуется наличие тега объекта с позицией: absolute;и непрозрачность: 0;потому что он не загружается с дисплеем: нет ;.Вот код:

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);
    }
}

Предыдущий код работает, но лучшее ли это решение?

Answer 1

Я бы использовал DOMParser .

. Он анализирует html / svg / xml так же, как ваш браузер, и возвращает документ.В этом случае SVGDocument, потому что тип MIME установлен на 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.org/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);