如何为SVG元素添加背景图？D3.js实现罗盘时添加表盘背景的问题

要给罗盘添加表盘背景图，只需要在SVG中优先插入背景图片元素（保证渲染层级在指针下方即可），修改后的完整代码如下：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <input type="range" min="0" max="360" value="0" id="slider" oninput="updateAngle(this.value)">
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 200)
      .attr("height", 200)
      .attr('viewBox', '-50 -50 100 100')

    // ========== 新增：添加罗盘表盘背景图 ==========
    svg.append('image')
      // 替换成你自己的表盘图片路径
      .attr('href', './你的罗盘表盘图片地址.png')
      // 位置和尺寸和viewBox完全匹配，铺满整个SVG
      .attr('x', -50)
      .attr('y', -50)
      .attr('width', 100)
      .attr('height', 100)
    // ========== 新增结束 ==========

    var path_d = "M 0,0 L 0,-10 L 50,0 L 0,10 Z";

    function updateAngle(value) {
      var angle = parseInt(value);
      var data = [{
        angle: angle,
        color: 'black'
      }, {
        angle: (180 + angle) % 360,
        color: 'red'
      }];

      paths = svg.selectAll('path')
        .data(data);

      paths.enter()
        .append('path')
        .attr('d', path_d)
        .merge(paths)
        .style('fill', d => d.color)
        .attr('transform', d => `rotate(${d.angle})`);

      paths.exit().remove();
    }

    updateAngle(0);
  </script>
</body>

补充说明 #

• SVG的渲染逻辑是先定义的元素在下层，后定义的在上层，所以背景图的插入代码必须放在指针生成逻辑之前，才能保证指针显示在表盘上方。
• 如果你不需要滑块输入，直接删除<input>相关代码即可，调用updateAngle()的时候直接传入第三方软件导出的角度数值就能驱动指针转动。
• 如果你的表盘图片本身存在偏移，可调整x、y属性的值校准位置，保证和指针的旋转中心对齐。

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