svg画半圆详解（L指令、M指令、A指令）

最新推荐文章于 2024-09-25 17:58:55 发布

置顶多多_duoduo

最新推荐文章于 2024-09-25 17:58:55 发布

阅读量5.5k

点赞数 5

CC 4.0 BY-SA版权

文章标签： svg css

本文链接：https://blog.youkuaiyun.com/weixin_40779234/article/details/113701412

本文详细解析了如何使用SVG的L、M和A指令来绘制半圆，包括L指令的中心点理解，M指令的上边连线点设置，以及A指令的七个参数解释。通过实例展示了不同参数变化对形状的影响，并给出了画整圆的方法。同时推荐了关于SVG整圆绘制及text标签样式配置的相关教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
接到需求，要求做出一个这样的活动转盘，，，，，所有文字呈圆形排布，活动是公共抽奖活动模板，后台输出抽奖礼物，所以不能切图，看样子CSS也解决不了，就找到了svg

了解画半圆的各个指令

一开始想的很美好，在教程网站先找个半圆示例改下就好了，但，，，各大教程网站都没有半圆的示例，呆滞在工位，，百度找svg画半圆，180度半圆？只有代码没有讲解？代码加两三个重要点讲解？小白瑟瑟发抖，哭晕在工位。学习使我快乐，从头开始学，找各博主文章学习研究总结。
在这里插入图片描述

// 图形示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG Draw Arc</title>
  <style media="screen">
    .svgs{display: flex; flex-flow:row wrap; justify-content: space-around; width: 620px; margin: 0 auto;}
    .svgs svg{width:300px; height:200px; background: #F2F2F2; margin-bottom: 10px;}
  </style>
</head>
<body>
  <div class="svgs">
  <svg>
  	//背景布
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
    //半圆对象
    <path  d="M 200 100 A 50 50  0 0 1 186.5 134 L150 100Z" stroke="#000" fill="green" fill-opacity="1" />
  </svg>
</div>
</body>
</html>

L指令

L指令为中心点，即为图中1点
L指令由L150 100改为L100 100后：

<path  d="M 200 100 A 50 50  0 0 1 186.5 134 L100 100Z" stroke="#000" fill="green" fill-opacity="1" />

在这里插入图片描述

M指令

M指令为上边连线点，即为图中2点
M指令有两个参数：上边连线点X坐标上边连线点Y坐标
M指令由M 200 100改为M 250 100后：

在这里插入图片描述

A指令

A指令有七个参数：

rx（画出半圆中唯一一条弧线所需的半径）
ry（同上，rx不等于ry时为椭圆）
顺时针角度（rx、ry相等时设置无效）
1大弧0小弧（使用rx、ry所画出的圆中两点之间的一侧大弧弧度还是一侧小狐弧度），示例中参数使用的0，改为1后如下图：
1顺时针0逆时针（rx、ry所画的弧度是按照顺时针方向放置还是逆时针方向放置即圆弧在半圆两条线交叉角度中是外凸还是内凹），示例中参数使用的1，改为0后如下图：
下边连线点即终点，图中3点X坐标
下边连线点即终点，图中3点Y坐标，示例中下边连线点X、Y参数使用的186.5 134，改为216.5 134后如下图：

画整半圆

在这里插入图片描述

//示例
<svg>
	//背景布
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
    //圆对象
    <path d="M 100 100 A 50 50 0 1 1 200 100z" stroke="black" stroke="#000" fill="green" />
</svg>