如何不使用canvas在.tif格式图片上层叠加D3 SVG多边形

原有正常实现方案 #

针对jpg等普通格式图片，实现「底图+上层SVG多边形」的展示逻辑如下：

• 创建div作为承载容器
• 容器内插入img标签加载底图资源
• 同容器内追加SVG元素，通过D3在SVG内绘制多边形，元素默认渲染顺序会让SVG显示在img上层，实现多边形叠加效果

核心实现代码：

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");

正常渲染后的DOM结构示例：

<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>

当前故障场景 #

现有一批.tif后缀格式的图片，使用seikichi/tiff库解析时，库默认将解析后的图片输出到canvas元素，再追加到容器中完成渲染，对应解析代码：

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();

该方案存在的问题：

• D3不直接操作canvas元素，原有逻辑依赖img作为底图，在同容器上层叠加SVG多边形
• 目前TIFF图片可通过canvas正常显示，但上层的多边形无法展示
• 曾尝试调整.toCanvas()方法适配SVG，仍未实现多边形在TIFF图片上层显示的效果

内容的提问来源于stack exchange，提问作者anonym