d3.js 如何使用d3和react动态地为svg中的路径元素添加颜色

mfuanj7w 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(185)

我有一个SVG图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="12" />
  <path class="svg-fill"
    d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm1,3.3,1.35-1a8,8,0,0,1,4.38,3.34L18.34,9,17,9.49,13,6.7Zm-3.35-1L11,5.3V6.7L7,9.49,5.66,9,5.27,7.69A8.1,8.1,0,0,1,9.65,4.35ZM7.08,17.11l-1.14.1A7.94,7.94,0,0,1,4,12c0-.12,0-.23,0-.35l1-.73,1.38.48,1.46,4.34Zm7.42,2.48a7.83,7.83,0,0,1-5,0L8.81,18.1,9.45,17h5.11l.64,1.11ZM14.27,15H9.73L8.38,11,12,8.44,15.63,11Zm3.79,2.21-1.14-.1-.79-1.37,1.46-4.34L19,10.93l1,.73c0,.11,0,.22,0,.34A7.94,7.94,0,0,1,18.06,17.21Z" />
</svg>

我尝试在D3图上使用以下代码进行渲染：

svg
    .append('image')
    .attr('xlink:href', MyIcon)

我如何动态地改变svg中路径的颜色，因为我将从一个函数运行append代码，类似于：

const renderIcon = (iconColor) => {
  svg
    .append('image')
    .attr('xlink:href', MyIcon)
    // code to apply color param to the icon path

}

d3.js

来源：https://stackoverflow.com/questions/73247194/how-to-add-color-to-a-path-element-in-an-svg-dynamically-with-d3-and-react

1条答案

按热度按时间

ecr0jaav1#

找不到一个很好的方法来实现上面的功能。我最终找到的解决方案是在组件的return语句中的svg元素内的defs元素中定义图标：

return (
<svg>
  <defs>
    <MyIcon color={myColor1} id="myIcon1" />
    <MyIcon color={myColor2} id="myIcon2" />
  </defs>
</svg>
)

其中MyIcon看起来像这样：

<g fill={color} id={id}>
  // other svg elements
</g>

然后通过将use元素追加到svg元素并传入icons id属性来使用它们：

svg.append('use').attr('href', '#myIcon1');
svg.append('use').attr('href', '#myIcon2');

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 如何使用d3和react动态地为svg中的路径元素添加颜色

1条答案

相关问题

热门标签

最新问答