实际上,我是SVG的新手。我需要绘制如下所示的棒球喷雾图。请帮助如何准确地进行绘制,并且每个部分都可以动态变化。可以使用HTML CSS绘制。谢谢。
我正在用OP的重要评论更新问题:
我忘了告诉你这是棒球场。考虑一下PA上的击球手,我们以游戏中地面附近的百分比来显示击球手的命中位置。
答案 0 :(得分:0)
有几个步骤:
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>