React结合d3开发时无法为SVG Circle元素填充图片 求助

问题原因 #

你的代码核心问题有两个：

1. 定义的SVG pattern没有设置唯一ID，也没有在circle的fill属性中正确引用pattern，而是直接把图片路径赋值给了fill，SVG无法识别这种用法
2. 你把defs定义在了每个节点的g元素下，既冗余也容易导致ID冲突，正确的做法是将defs统一放在SVG根节点下

具体修改方案 #

1. 移除非必要的node下defs定义，在创建svgContainer后新增全局defs节点，为每个数据项生成带唯一ID的pattern
2. 修改circle的fill属性，引用对应ID的pattern
3. 补充pattern的适配属性，确保图片可以自适应圆形大小，不会出现重复拉伸问题

修改代码片段

首先找到创建svgContainer的代码段，在后面新增defs定义：

var svgContainer = container
  .append("svg")
  .attr("width", containerWidth)
  .attr("height", containerHeight);

// 新增：全局定义pattern
const defs = svgContainer.append('defs')
defs.selectAll('pattern')
  .data(data)
  .enter()
  .append('pattern')
  // 用币种symbol生成唯一ID，避免冲突
  .attr('id', d => `coin-pattern-${d.text}`)
  // 以下属性设置让图案自适应填充元素大小，无需固定宽高
  .attr('width', 1)
  .attr('height', 1)
  .attr('patternContentUnits', 'objectBoundingBox')
  .append('image')
  // 旧版d3请改用.attr('xlink:href', d => d.image)
  .attr('href', d => d.image)
  .attr('width', 1)
  .attr('height', 1)
  // 保持图片比例居中裁剪
  .attr('preserveAspectRatio', 'xMidYMid slice')

然后删除原来的node.append("defs")整段代码，修改circle的fill逻辑：

node
  .append("circle")
  .attr("r", 1e-6)
  // 修改fill为引用对应pattern
  .style("fill", d => `url(#coin-pattern-${d.text})`);

修改完成后图片即可正常填充到圆形元素中。

内容的提问来源于stack exchange，提问作者Tom van den Bogaart