尝试实现平移和缩放功能时，Safari上未显示D3.js V4图片

Question

I am trying to implement panning and zooming feature using d3.js, everything is working fine, but when I try to run the same code on Safari the image is not displayed.

The recreation of the issue (Please run it in safari):

 let imgHeight = 400, imgWidth = 900, width = 900, height = 450; let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); let svg = d3.select("#canvas").append("svg") .attr("width", width + "px") .attr("height", height + "px"); svg = svg.append("g") .attr("transform", "translate(0,25)") .call(zoom) .append("g"); svg.append("image") .attr("width", imgWidth + "px") .attr("height", imgHeight + "px") .attr("href", "https://www.w3schools.com/howto/img_fjords.jpg"); function zoomed() { svg.attr("transform", d3.event.transform); } 

 <div id='canvas'> </div> <script src="https://d3js.org/d3.v4.min.js"></script> 

Answer 1

I just need to change attribute href in image tag as xlink:href , now it's working fine.

 let imgHeight = 400, imgWidth = 900, width = 900, height = 450; let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); let svg = d3.select("#canvas").append("svg") .attr("width", width + "px") .attr("height", height + "px"); svg = svg.append("g") .attr("transform", "translate(0,25)") .call(zoom) .append("g"); svg.append("image") .attr("width", imgWidth + "px") .attr("height", imgHeight + "px") .attr("xlink:href", "https://www.w3schools.com/howto/img_fjords.jpg"); function zoomed() { svg.attr("transform", d3.event.transform); } 

 <div id='canvas'> </div> <script src="https://d3js.org/d3.v4.min.js"></script>