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

Question

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

Answer 1

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

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文件而只知道它的width/height，你可以参考我的

原回答：

我不认为你可以从数据中得到高度 url。
作为解决方法，您可以使用 fileReader API 的 readAsText() 方法，结合 DOMParser() 方法，以便读取 viewBox 属性的 svg.

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 元素的宽度

Get width of svg element from uploaded file

html

javascript

jquery

svg