svg实现转盘，轮盘

• 最近产品上有个需求，需要用到类似转盘控制方向的需求，如图：

  
  image.png

• 开始的时候用的是div中position:relative 加子组件直接用切图，position:absolute绝对定位，慢慢移动组合成圆盘，切图如果不精确，很难组合成圆，效果不是很好，如图:

  
  image.png

实现轮盘转盘就是画圆和扇形，实现圆和扇形有两种方式

• css实现
• svg实现

下面我所说的就是svg的形式

首先要知道svg的 A 指令：

参数	描述
rx	椭圆长轴半径
ry	椭圆短轴半径
xa	椭圆与x轴的夹角
lf	所取的弧大小，1取大弧，0取小弧
sf	绘制弧线的方向，1顺时针绘制，0逆时针绘制
ex	结束点的x坐标
ey	结束点的y坐标

• 然后是计算坐标。我这个圆是等分8个扇形。所以每个扇形是360/8=45度
• 我们需要计算这几个数:cos45和sin45的数值
• 拿第一个扇形路径来举例

<circle
        cx="50"
        cy="50"
        r="48"
        stroke="#02effb"
        fill="transparent"
        stroke-width="2"
      ></circle>
 <path
        d="M 50 50  L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
      ></path>

• circle中， cx="50"cy="50" 原点50 50 以半径 r="48" 画圆
• M 50 50:从 x:50，y:50坐标开始
• L 50 3 :画一条直线 到终点坐标x 50 y 3
• A 45 45, 0,0,1,85.89 20.16：椭圆长短轴 50 50 x轴夹脚0，0小弧(凸扇形)，1顺时针，结束点坐标x x 85.89 y 20.16
• Z 直线回到原点封闭
• 重点就是 结束点坐标的计算，圆的半径是48，原点坐标是50 50，a=48cos45，b=48sin45, x=50-a，y=50-b，算出来大概的数。然后大概调整下

<div class="ball">
    <svg
      
      width="15"
      height="15"
      id="svg1"
      style="
        position: absolute;
        top: 10%;
        left: 41%;

        width: 16%;
        transform: rotate(150deg);
      "
    >
<!-- 白色箭头-->
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg3"
      style="
        position: absolute;
        top: 37%;
        left: 76%;
        width: 16%;
        transform: rotate(240deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg5"
      style="
        position: absolute;
        top: 73%;
        left: 44%;
        width: 16%;
        transform: rotate(330deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="15"
      height="15"
      id="svg7"
      style="
        position: absolute;
        top: 46%;
        left: 8%;
        width: 16%;
        transform: rotate(60deg);
      "
    >
      <path
        d="M 0 15  L 0 0  A 15 15, 0,0,0,13 7.5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg2"
      style="
        position: absolute;
        top: 19%;
        left: 65%;
        width: 16%;
        transform: rotate(195deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg4"
      style="
        position: absolute;
        top: 63%;
        left: 69%;
        width: 16%;
        transform: rotate(285deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg6"
      style="
        position: absolute;
        top: 70%;
        left: 22%;
        width: 16%;
        transform: rotate(15deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg
      width="10"
      height="10"
      id="svg8"
      style="
        position: absolute;
        top: 24%;
        left: 14%;
        width: 16%;
        transform: rotate(105deg);
      "
    >
      <path
        d="M 0 10  L 0 0  A 15 15, 0,0,0,8.66 5 Z"
        stroke-width="1"
        class="ctl-ac"
      ></path></svg
    ><svg width="100" height="100" transform="rotate(-22)">

<!-- 圆和扇形-->
      <circle
        cx="50"
        cy="50"
        r="48"
        stroke="#02effb"
        fill="transparent"
        stroke-width="2"
      ></circle>
      <path
        d="M 50 50  L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
      ></path>
      <path
        d="M 50 50  L  85.89 20.16 A 45 45, 0,0,1,96.5 50 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  96.5 50 A 45 45, 0,0,1,85.89 79.84 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  85.89 79.84 A 45 45, 0,0,1,50 97 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  50 97 A 45 45, 0,0,1,14.11 79.84 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  14.11 79.84 A 45 45, 0,0,1,3 50 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  3 50 A 45 45, 0,0,1,14.11 20.16 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
      <path
        d="M 50 50  L  14.11 20.16 A 45 45, 0,0,1,50 3 Z"
        stroke="#085b8b"
        stroke-width="1"
        class="ctl-svg"
        
      ></path>
    </svg>
  </div>
<style>
.ball {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;

margin-top: 7%;
margin-left: 5%;
}
.ctl-svg {
fill: #0a6d98;
fill-opacity: 0.3;
}
.ctl-svg:hover {
fill: #0a6d98;
fill-opacity: 0.8;
}
.ctl-ac {
fill: #red;
}
</style>

最终效果：

Untitled.gif

另:还有一种方式应该也可以，画出一个扇形，以扇形原点旋转对应角度，也可以实现