SVG绘制一个包含4个扇区的圆圈

Question

我需要画一个有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.

这是我得到的代码:http ://codepen.io/anon/pen/QjKgdY 蓝色的是我在这里谈论的那个,黑色的是我尝试不同的数字.

为什么我得不到合适的1/4圈？我错过了什么？

Answer 1

这些数字没有多大意义.首先移动到(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

画一个椭圆弧从这个角度来(-70,-70)用rx=rx=99,x-axis-rotation=0,large-arc-flag=1,和sweep-flag=0.(这里描述了最后两个参数).

Z

关闭路径.

Answer 2

这是SVG我在React组件中使用的程序生成扇区路径的函数：

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>

Answer 3

我真的很懒，所以当我需要绘制弧线时我会使用以下脚本：创建一个单位向量：

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 p = svgElem.createSVGPoint()
p.x = 0
p.y = 1

var m = svgElem.createSVGMatrix()