使用svg定制化绘制圆环、漏斗

最新推荐文章于 2024-03-21 18:10:20 发布

allen_csdns

最新推荐文章于 2024-03-21 18:10:20 发布

阅读量502

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/allen_csdns/article/details/109309262

版权

本文展示了如何使用SVG（ Scalable Vector Graphics）来定制化绘制圆环和漏斗图表，通过代码实例，直观地呈现了最终的图形效果。

摘要由CSDN通过智能技术生成

成品展示图：

在这里插入图片描述

在这里插入图片描述
直接上代码

//svg绘制漏斗
  svgRender(
    left,
    index,
    text,
    topWidth,
    height,
    bottomWidth,
    colorOne,
    colorTwo,
    isActive
  ) {
    return (
      <div
        style={
  {
          position: 'relative',
          width: { topWidth },
          top: isActive ? this.state.translateY : 0,
        }}
        onClick={this.onsvg.bind(this, index)}
      >
        <svg height={height} className={styles['funnel-svg-box']}>
          <path
            fill={`url(#${index})`}
            d={`M${left} 0 L${left + topWidth} 0 L${
              left + topWidth - (topWidth - bottomWidth) / 2