我需要画一个有4个扇区的圆。我试着像这样画一个扇区:
<path d="M200, 200, l 100,-100 a180,180 0 0,0 -127.27,127.27 z"/>
我从方程中得到了-127.27和127.27:
x=cos(angle) * radius
y=sin(angle) * radius
角度是135,半径是180。
这是我得到的一个编码。蓝色的是我在这里说的,黑色的是我用不同的数字尝试的。
为什么我没有得到一个合适的1/4圆?我错过了什么?
这些数字没有多大意义。从移动到(200,200)
开始,然后画一条直线到(300,100)
(长度:141个单位),接着是一个圆弧,结束于(172.73,227.27)
(半径180个单位)。直线的长度不应该至少等于圆的半径吗?
你让自己的生活变得非常困难。如果您想要绘制四个圆段,那么最好的第一步是使用<g>
元素将坐标系统移动到圆的中心。然后,您可以使用几乎相同的代码创建所有四个段。
下面是一个例子:
<svg width="200" height="200" viewBox="0 0 200 200">
<g transform="translate(100,100)" stroke="#000" stroke-width="2">
<path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#f00"/>
<path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#080"/>
<path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#dd0"/>
<path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#04e"/>
</g>
</svg>
如果你想要一个半径不同的圆,将99
替换为你想要的半径,并将70
替换为这个值乘以sqrt(0.5)。
路径数据分解:
M0 0-70 70
移动到(0,0)
,然后画一条直线到(-70,70)
(隐含L
)。
A99 99 0 0 1-70-70
用rx=rx=99
、x-axis-rotation=0
、large-arc-flag=1
和sweep-flag=0
从该点到(-70,-70)
画一条椭圆弧。(最后两个参数在这里描述)。
Z
我真的很懒,所以我做什么,当我需要画弧,是我使用以下脚本:我创建一个单位向量:
var p = svgElem.createSVGPoint()
p.x = 0
p.y = 1
然后我为我的旋转创建一个矩阵:
var m = svgElem.createSVGMatrix()
最后我旋转单位向量并将其平移/缩放到我想要的位置
var p2 = p.matrixTransform(m.rotate(45))
p2.x = cx + p2.x*rx
p2.y = cy + p2.y*ry
,现在我可以console.log(p2.x,p2.y)
,如果我想硬编码段,或者你可以从脚本创建段。
这里有一个基本的例子(我知道,对于上面这样一个简单的情况,这是没有必要的,但这是一个简单的通用解决方案,在过去的几年里帮助了我很多…)
var svgElem=document.getElementById("svg");
var cx=100;
var cy=100;
var rx=90;
var ry=90;
var p = svgElem.createSVGPoint();
p.x = 0;
p.y = 1;
var m = svgElem.createSVGMatrix();
var p2 = p.matrixTransform(m.rotate(45));
p2.x = cx + p2.x*rx;
p2.y = cy + p2.y*ry;
console.log(p2.x,p2.y);
var path = document.createElementNS("http://www.w3.org/2000/svg","path");
svgElem.appendChild(path);
var d="M"+cx+" "+(cy+ry)+"A"+rx+" "+ry+" 0 0 1"+p2.x+" "+p2.y+"L"+cx+" "+cy+"z";
path.setAttribute("d",d)
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
</svg>
这是我在React
组件中使用的SVG
扇区路径的编程生成函数:
getSectorPath(x, y, outerDiameter, a1, a2) {
const degtorad = Math.PI / 180;
const halfOuterDiameter = outerDiameter / 2;
const cr = halfOuterDiameter - 5;
const cx1 = (Math.cos(degtorad * a2) * cr) + x;
const cy1 = (-Math.sin(degtorad * a2) * cr) + y;
const cx2 = (Math.cos(degtorad * a1) * cr) + x;
const cy2 = (-Math.sin(degtorad * a1) * cr) + y;
return "M" + x + " " + y + " " + cx1 + " " + cy1 + " A" + cr + " " + cr + " 0 0 1 " + cx2 + " " + cy2 + "Z";
}
,下面是用法:
<svg width={outerDiameter} height={outerDiameter}>
<path d={this.getSectorPath(outerDiameter / 2, outerDiameter / 2, outerDiameter, 45, 135)} fill="#f00"/>
<path d={this.getSectorPath(outerDiameter / 2, outerDiameter / 2, outerDiameter, 135, 225)} fill="#f00"/>
<path d={this.getSectorPath(outerDiameter / 2, outerDiameter / 2, outerDiameter, 225, 315)} fill="#f00"/>
<path d={this.getSectorPath(outerDiameter / 2, outerDiameter / 2, outerDiameter, 315, 45)} fill="#f00"/>
</svg>
这是我从JavaScript创建svg的示例。我的灵感来自@zmechanic的回答。一个扇区有梯度。要执行它,只需创建一个html文档并复制内容。
<!DOCTYPE html>
<html>
<body>
<div id="svgRoot"></div>
<script type="text/javascript">
const DIAMETER = 200;
const SVG_SIZE = DIAMETER + 12;
const STROKE = "black";
const STROKE_WIDTH = "2";
const getSectorPath = (x, y, outerDiameter, a1, a2) => {
const degtorad = Math.PI / 180;
const cr = outerDiameter / 2;
const cx1 = Math.cos(degtorad * a2) * cr + x;
const cy1 = -Math.sin(degtorad * a2) * cr + y;
const cx2 = Math.cos(degtorad * a1) * cr + x;
const cy2 = -Math.sin(degtorad * a1) * cr + y;
return `M${x} ${y} ${cx1} ${cy1} A${cr} ${cr} 0 0 1 ${cx2} ${cy2}Z`;
};
const svgRoot = document.getElementById("svgRoot");
const pieChartSvgString = `<svg width="${SVG_SIZE}" height="${SVG_SIZE}">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#DD5E89;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F7BB97;stop-opacity:1" />
</linearGradient>
</defs>
<g fill="url(#gradient1)">
<path
stroke="${STROKE}"
strokeWidth="${STROKE_WIDTH}"
d="${getSectorPath(SVG_SIZE / 2, SVG_SIZE / 2 - 5, DIAMETER, 45, 135)}"
/>
</g>
<path
stroke="${STROKE}"
strokeWidth="${STROKE_WIDTH}"
d="${getSectorPath(SVG_SIZE / 2, SVG_SIZE / 2, DIAMETER, 135, 225)}"
fill="#00ff00"
/>
<path
stroke="${STROKE}"
strokeWidth="${STROKE_WIDTH}"
d="${getSectorPath(SVG_SIZE / 2, SVG_SIZE / 2, DIAMETER, 225, 315)}"
fill="#0000ff"
/>
<path
stroke="${STROKE}"
strokeWidth="${STROKE_WIDTH}"
d="${getSectorPath(SVG_SIZE / 2, SVG_SIZE / 2, DIAMETER, 315, 45)}"
fill="#ffff00"
/>
</svg>`;
const svgNode = document.createRange().createContextualFragment(pieChartSvgString);
svgRoot.appendChild(svgNode);
</script>
</body>
</html>