Svg 喷雾图表

Question

实际上我是 SVG 的新手。我需要绘制棒球喷雾图，如下所示。请帮助如何准确地得到这个，每个部分都是动态变化的。是否可以使用 HTML CSS 进行绘制。谢谢。

更新

我正在用重要的 OP 的 cmets 更新问题：

我忘了告诉你这是一个棒球场。考虑 PA 上的击球手，我们在比赛中以百分比形式显示击球手击球位置。

Answer 1

有几个步骤：

1. 您绘制各个路径
2. 您为文本绘制路径（路径上的文本）
3. 你画的文字

let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = [];// an array for the paths


class pathObj{
  constructor(a1,a2,R,r,path,text){
    this.a1 = a1; //starting angle
    this.a2 = a2; // ending angle
    this.R = R;//the outer radius
    this.r = r;// the middle radius
    this.rm = r + 2*(R - r)/3; // the radius for the text path
    this.path = document.querySelector(`#${path}`);
    this.textpath = document.querySelector(`#p${path}`);
    this.textElement = document.querySelector(`#t${path}`);
    this.textPath = document.querySelector(`#t${path} textPath`);
    this.textPath.textContent = text;
    
    // points to draw the paths
    this.p1 = {
     x:this.R*Math.cos(this.a1),
     y:this.R*Math.sin(this.a1)
    };
    this.p2 = {
     x:this.R*Math.cos(this.a2),
     y:this.R*Math.sin(this.a2)
    }
   this.p3 = {
     x:this.r*Math.cos(this.a2),
     y:this.r*Math.sin(this.a2)
    }
    this.p4 = {
     x:this.r*Math.cos(this.a1),
     y:this.r*Math.sin(this.a1)
    }
     this.p5 = {
     x:this.rm*Math.cos(this.a1),
     y:this.rm*Math.sin(this.a1)
    }
    this.p6 = {
     x:this.rm*Math.cos(this.a2),
     y:this.rm*Math.sin(this.a2)
    }
  }

  draw(){
    // the d attribute for the main path
    let d = `M${this.p1.x},${this.p1.y}
             A${this.R},${this.R} 0 0 1 ${this.p2.x},${this.p2.y}
             L${this.p3.x},${this.p3.y}
             A${this.r},${this.r} 0 0 0 ${this.p4.x},${this.p4.y}
             Z`;
    // the d attribute for the text path         
    let d1 = `M${this.p5.x},${this.p5.y}
             A${this.R},${this.R} 0 0 1 ${this.p6.x},${this.p6.y}`
    
    
    this.path.setAttributeNS(null,"d",d);
    this.textpath.setAttributeNS(null,"d",d1);
    
  }
  
}

// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())

svg{border:1px solid }
path{stroke:black; fill:transparent;}
text{ text-anchor:middle;}

<svg viewBox="-200 -250 400 250">
<defs>
   <path id="pa" /> 
   <path id="pb" />
   <path id="pc" />
   <path id="pd" />
   <path id="pe" />
   <path id="pf" />
   <path id="pg" />
  </defs> 
<g transform="rotate(-135)">
  <path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
  <path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
  <path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
  <path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
  <path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
  <path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
  <path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>