D3.js V4实现平移缩放功能时Safari中图片无法显示

我帮你排查了这个跨浏览器兼容问题，发现主要是两个点导致Safari里图片不显示：一是Safari对SVG <image>元素的href属性兼容性有特殊要求，二是你的SVG层级结构和缩放变换的应用方式在Safari里触发了渲染异常。下面是修复后的完整代码，以及详细的修改说明：

修复后的代码 #

<div id='canvas'> </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
let imgHeight = 400, imgWidth = 900, width = 900, height = 450;
let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

// 调整SVG层级：将缩放监听的g和图片容器g分开
let svg = d3.select("#canvas").append("svg")
  .attr("width", width + "px")
  .attr("height", height + "px")
  .append("g")
  .attr("transform", "translate(0,25)")
  .call(zoom); // 把zoom绑定到外层g

// 图片容器是单独的子g，用于应用缩放变换
let imageContainer = svg.append("g");

imageContainer.append("image")
  .attr("width", imgWidth + "px")
  .attr("height", imgHeight + "px")
  .attr("xlink:href", "https://www.w3schools.com/howto/img_fjords.jpg") // 兼容Safari的xlink:href
  .attr("href", "https://www.w3schools.com/howto/img_fjords.jpg"); // 保留标准href兼容其他浏览器

function zoomed() {
  // 将变换应用到图片容器g上，而非绑定zoom的g
  imageContainer.attr("transform", d3.event.transform);
}
</script>

关键修改点说明 #

• 兼容Safari的图片引用方式：Safari对SVG <image>的标准href属性支持不够稳定，添加xlink:href属性可以确保图片在Safari中正常加载，同时保留href属性兼容其他现代浏览器。
• 调整SVG层级结构：原来的代码把绑定zoom的g和图片容器g合并成了同一个元素，在Safari中这种嵌套会导致变换渲染冲突。现在把zoom绑定到外层g，图片放在单独的子g中，缩放变换只作用于图片容器，避免了渲染异常。

修改后在Safari中运行，图片就能正常显示，同时平移缩放功能也能正常工作啦~

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