Question

用户上传带有html输入元素的svg文件：

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

我要在handleFiles函数中放入什么以读取svg中的path标记。我不在乎显示图像，我只想读取其数据的路径标签。有什么想法吗？

编辑：到目前为止，我正在使用FileReader来获取图像数据，如下所示：

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

现在如何从svgData中获取路径标签？这是最好的方法吗？

EDIT2：好的，我想我有一个解决方案，但是感觉有点。它需要有一个带有position：absolute;的对象标签。和opacity：0;因为它不会与display：none;一起加载。这是代码：

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并返回一个Document。在这种情况下，因为MIME类型设置为image/svg+xml，所以是SVGDocument。

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

从用户上传的svg获取路径标签的最简单方法？

1 个答案: