SVG用4个扇区画一个圆 [英] SVG Draw a circle with 4 sectors

问题描述

我需要画一个有4个扇区的圆.我正在尝试绘制这样的扇区:

I need to draw a circle with 4 sectors. I'm trying to draw a sector like this:

<path d="M200, 200, l 100,-100 a180,180 0 0,0 -127.27,127.27 z"/>

我从等式中得到了-127.27，127.27:

I got the -127.27, 127.27 from the equations:

x=cos(angle) * radius
y=sin(angle) * radius

我的角度是135，半径是180.

My angle is 135, and my radius is 180.

这是我得到的 codepen .蓝色的是我在这里谈论的那个，黑色的是我正在尝试使用不同数字的那个.

Here's a codepen of what i get. The blue one is the one I'm talking about here, the black one is what I'm trying with different numbers.

为什么我的圆环不正确1/4?我想念什么?

Why am i not getting a proper 1/4 of a circle? What am i missing?

推荐答案

数字没有太大意义.首先移到(200,200)，然后画一条直线到(300,100)(长度:141个单位)，然后以圆弧结尾，终止于(172.73，227.27)(半径180个单位).直线段的长度不应该至少等于圆的半径吗?

The numbers don't make much sense. You start by moving to (200,200), then draw a straight line to (300,100) (length: 141 units) followed by a circular arc ending at (172.73,227.27) (radius 180 units). Shouldn't the length of the straight line segment at least be equal to the radius of the circle?

您正在为自己的生活带来极大的困难.如果要绘制四个圆形线段，那么好的第一步是使用< g> 元素将坐标系移动到圆心.然后，您可以使用几乎相同的代码创建所有四个细分.

You're making life terribly difficult for yourself. If you want to draw four circular segments, a good first step would be to use a <g> element to move the coordinate system to the centre of the circle. Then you can create all four segments using near-identical code.

这是一个例子:

<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 ，并用此值乘以sqrt(0.5)替换 70 .

If you want a circle with a different radius, replace 99 with the radius you want, and replace 70 with this value times sqrt(0.5).

M0 0-70 70

移动到(0,0)，然后绘制指向(-70,70)的直线(暗含 L ).

Move to (0,0), then draw a straight line to (-70,70) (the L is implied).

A99 99 0 0 1-70-70

从此点绘制椭圆弧到(-70，-70)，其中 rx = rx = 99 ， x-axis-rotation = 0 ， large-arc-flag = 1 和 sweep-flag = 0 .(在此处中介绍了最后两个参数.)

Draw an elliptical arc from this point to (-70,-70) with rx=rx=99, x-axis-rotation=0, large-arc-flag=1, and sweep-flag=0. (The last two parameters are described here).

Z

关闭路径.

这篇关于SVG用4个扇区画一个圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！