javascript - Adding an uploaded file as an <image> element in an SVG -

if uploads image <input type="file"/>, there million different ways add image somewhere <img> element or onto <canvas>. want instead add <image> element in svg , i'm totally stymied.

if add uploaded file canvas , use canvas.getdataurl(), valid data url can use background image or whatever. setting xlink:href of <image> element url nothing. i've tried adding file directly without canvas step, e.g.:

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

that seems still image won't display. have width , height set on it. i've tried various blob url methods , don't anything.

how can take image file file input , display <image> element in svg?

any assistance appreciated.

the this.files[0] returns file object. xlink:href attribute assigment takes string. automatic conversion of file object string results in attribute being assigned string "[object file]".

you read file data url , assign data url href attribute. mentioned in comment robert longson, using jquery svg attribute requiring namespace can cause problems. suggest setting attribute using plain dom. example...

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]) });