将上传的文件添加为 SVG 中的 <image> 元素

Question

如果有人上传带有<input type="file"/> 的图片，则有上百万种不同的方法可以将图片作为<img> 元素或<canvas> 添加到某处。我想将其添加为 SVG 中的 <image> 元素，但我完全受阻。

如果我将上传的文件添加到画布并使用 canvas.getDataURL()，我会得到一个有效的数据 URL，我可以将其用作背景图像或其他任何东西。但是将<image> 元素的xlink:href 设置为该URL 没有任何作用。我也尝试过不使用画布步骤直接添加文件，例如：

$("#file").on("change",function(){
  $("image").attr("xlink:href",this.files[0]);
});

这似乎做了一些事情，但图像仍然不会显示。我在上面设置了宽度和高度。我还尝试了各种 Blob URL 方法，但这些方法都没有做任何事情。

如何从文件输入中获取图像文件并将其显示为 SVG 中的 <image> 元素？

非常感谢任何帮助。

Answer 1

this.files[0] 返回一个 File 对象。 xlink:href 属性分配采用字符串。 File 对象到字符串的自动转换导致属性被分配字符串“[object File]”。

您可以将文件作为数据 URL 读取，然后将数据 URL 分配给 href 属性。正如 Robert Longson 在评论中提到的，使用带有 SVG 属性的 JQuery 需要命名空间有时会导致问题。我建议使用普通 DOM 设置属性。比如……

var xlinkNS = "http://www.w3.org/1999/xlink";

$("#file").on("change",function(){
    var reader = new FileReader();
    reader.onload = function (e) {
      $("image")[0].setAttributeNS(xlinkNS, "href", e.target.result);
    };
    reader.readAsDataURL(this.files[0])
});