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

Get width of svg element from uploaded file

本文关键字：元素 svg 获取 文件      更新时间：2023-09-26

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

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

编辑，因为我误读了问题：

  • 如果您可以将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文件，但只知道它的宽度/高度，你可以参考我的

原始答案：

我认为你无法从数据url中获得高度
作为一种解决方法，您可以将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。

相关文章：