Question

我选择了svg文件并通过readDataUrl(<file>)阅读，我可以将image element设置为从文件中读取的值，将其设置为html src。但是，width和height属性将为0.如何将从文件读取的值设置为svg element，以便能够getBBox()。宽度来获取其宽度？

Answer 1

您可以使用XMLHttpRequest（或您喜欢的AJAX库）来读取和解析SVG文件。我想如果你愿意，你甚至可以将dataurl传递给它。

Answer 2

修改，，因为我误读了这个问题：

如果您可以将svg附加到文档中，并且需要使用FileReader，请使用其readAsText()方法，然后将其插入到html元素中。

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    var parent = document.getElementById('container');
    parent.innerHTML= reader.result;
  }

  if (file && file.type=="image/svg+xml") {
    reader.readAsText(file);
  } else {
    alert("wrong file type or no file provided");
  }
}

<div id="container"></div>
<input type="file" onchange="previewFile()">

如果您不需要使用FileReader（例如，如果文件保存在服务器上），Paul的回答会更好。
如果你不想实际附加svg文件但只知道它的宽度/高度，你可以参考我的

原始回答：

我认为你不能从数据网址中获得高度作为一种变通方法，您可以使用fileReader API的readAsText()方法并结合DOMParser()方法，以便读取svg的viewBox属性。

function xlog(msg){
	document.getElementById('log').textContent = msg;
	}
function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
 	var doc = new DOMParser().parseFromString(reader.result, 'application/xml');
	var viewBox = doc.documentElement.viewBox.baseVal;
	xlog('height:'+viewBox.height+' width:'+viewBox.width);
  }

  if (file && file.type=="image/svg+xml") {
    reader.readAsText(file);
  } else {
    xlog("wrong file type or no file provided");
  }
}

<p id="log"></p><br>
<input type="file" onchange="previewFile()">

请注意，您可以将doc.documentElement附加到文档中，然后获取元素的BBox。

从上传的文件中获取svg元素的宽度

2 个答案: