如何在svg圈子内添加自定义图片或图标

时间:2019-04-29 10:03:25

标签: reactjs svg

我正在使用react-tree-graph以树结构显示数据,因为节点以圆圈表示。我想在圆圈内添加图标。但是它没有显示图标。

我尝试使用以下代码,但无法获取结果。我想知道是否可以在圆圈内添加图标。我不想在圆圈下方添加文本并显示图标

<Tree
  data={data}
  height={400}
  width={400}
  svgProps={{
    className: 'custom'
  }}
  nodeRadius={10}
  circleProps={{fill: 'url(#image)'}}
  animated>
  <defs>
    <pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%">
      <image x="0" y="0" height="100%" width="100%" href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image>
    </pattern>
  </defs>
</Tree>

0 个答案:

没有答案