SVG 画一个有 4 个扇形的圆

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

这是一个codepen http://codepen.io/anon/pen/QjKgdY我得到的。蓝色的是我在这里讨论的，黑色的是我正在尝试使用不同数字的。

为什么我没有得到正确的 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

Move http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands to (0,0)，然后画一条直线(-70,70) (the L是隐含的）。

A99 99 0 0 1-70-70

Draw an 椭圆弧 http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands从这一点到(-70,-70) with rx=rx=99, x-axis-rotation=0, large-arc-flag=1, and sweep-flag=0。 （最后两个参数说明here http://www.w3.org/TR/SVG/images/paths/arcs02.svg).

Z

Close http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand路径。