Javascript 将上载的文件添加为<；图像>；SVG中的元素

如果有人上传带有

的图像，有一百万种不同的方法可以将图像作为

元素或添加到

中。相反，我想将它添加为SVG中的

元素，我完全被阻止了

如果我将上传的文件添加到画布并使用canvas.getDataURL（），我会得到一个有效的数据URL，可以用作背景图像或其他任何东西。但是将

元素的

xlink:href

设置为该URL不会起任何作用。我也尝试过不使用画布步骤直接添加文件，例如：

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

这似乎起了作用，但图像仍然无法显示。我在上面设定了宽度和高度。我还尝试了各种blobURL方法，但这些方法都没有任何作用

如何从文件输入中获取图像文件并将其显示为SVG中的

元素

---

非常感谢您的帮助。

this.files[0]返回一个文件对象。xlink:href属性assigment接受字符串。文件对象到字符串的自动转换会导致属性被分配字符串“[对象文件]”

您可以将文件作为数据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])
});

---

最好避免使用SVG进行jquery。xlink:href属性必须位于xlink名称空间中。谢谢！这就解决了问题。另外，用d3做同样的修改也很好：

d3.select（“image”）.attr（“xlink:href”，e.target.result）