Estoy trabajando mostrando polígonos en una imagen usando d3 svg y, como se muestra a continuación en el código javascript, estoy creando un elemento de etiqueta img y agregándolo a 'plantilla' y luego agregando svg a 'plantilla' para que los polígonos aparezcan en la imagen.

 var template = document.createElement('div'); var img = document.createElement('img'); img.setAttribute("src", imagesource); template.appendChild(img); var bb = d3.select(template).append("svg") .attr("width",width) .attr("height",height) .attr("id", "polygons");

...

 <img src="TSU/images/21021.jpg"> <svg width="1920" height="1080" id="polygons"> <g><rect x="1296 " y="229 " height="231" width="250" stroke="red"></rect> </g> </svg>

...

Pero tengo un conjunto de imágenes con extensión .tif y estoy usando la biblioteca seikichi/tiff, pero como se muestra a continuación en el código, la imagen se agrega a un elemento de lienzo y así es como se muestra la imagen,

pero como se mencionó anteriormente, necesito la etiqueta 'img', no 'canvas' porque D3 no usa el elemento canvas, necesita 'img' para poder agregar svg en la parte superior de la imagen,

y es por eso que las imágenes se muestran pero los polígonos no se muestran encima de la imagen. También traté de manipular el.

 var xhr = new XMLHttpRequest(); xhr.responseType = 'arraybuffer'; xhr.open('GET', imagesource); xhr.onload = function (e) { var tiff = new Tiff({buffer: xhr.response}); var canvas = tiff.toCanvas(); template.append(canvas) }; xhr.send();