svg：设置path路径画圆形
svg使用xml格式定义图形。svg全称是 Scalable Vector Graphics，意为可缩放矢量图形。svg可以内联到HTML中，可以用CSS定义定义其相关属性。svg开发之初并不考虑支持人工编写代码，所有它的语法都是对解析器说的，语法很怪异。不过由于它的强大，我们有必要接触一下，并将其应用到HTML中来。在文本效果集中营里，我提供了一个环形文字效果，为了帮助理解那个特效，这里开个帖子专门探讨一下svg的圆形路径。
svg画圆有自己的命令，不过我们这里仅讨论通过设计path路径来画一个圆。相关的svg命令命令有：
M = moveto（移动）
a = arc（画弧）
z = closepath（关闭路径）
在HTML中内联svg的语句：
<div>
<svg>
</svg>
</div>
可以看得出来，svg就是一个HTML标签。HTML5对svg完整支持。
现在给svg创建一个路径：
<div>
<svg>
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan" />
</svg>
</div>
path是svg元素的子元素，是一个自闭合标签，还可以有自己的HTML的 id 标识。这些不是问题，重点看 d="..." 是什么鬼？
d="M 50 100 a 50 50 0 1 1 0 1 z"
d 表示路径，M我们前面介绍了，是“移动到”命令，可大写也可小写，大写表示绝对定位，小写表示相对定位。M 50 100 表示移动到{50，100}坐标，也可以写成 M50 100，就是说M和数字之间可以没有空格。 M 50 100 其实起到的作用是设置圆心位置。
a 50 50，a是画弧命令，弧有两个半径值，我们要画的是圆形，所以两个半径一样，都是 50 像素，我们要画的圆半径为 50 px。
下面的四个参数，0 1 1 0，解释起来很麻烦，不讲，知道画圆就这么用就行。
最后的参数，1 z，表示关闭路径，1是z的参数，为什么这样，鬼才懂，强记就行。
圆形的填充颜色是可以定义的，可用CSS定义，也可直接使用HTML代码定义，都用到 fill 命令：
HTML代码：fill="green"
CSS代码： fill: green;
行内CSS代码：style="fill:green;"
下面给出一个完整实例代码。这个实例，在 200*200 的div盒子内，我们画一个半径为 50px 的圆，圆的填充颜色为 green。请特别注意我们画的圆在div里是居中的，这是尺寸设计得当的缘故：
<div style="margin: auto; width: 200px; height: 200px; border: 1px solid;">
<svg>
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan" fill="green" />
</svg>
</div>
效果请看楼下。
<div style="margin: auto; width: 200px; height: 200px; border: 1px solid;">
<svg>
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan" fill="green" />
</svg>
</div>
本帖最后由 马黑黑 于 2022-3-11 13:02 编辑
（接一楼，探讨文字绑定圆环）
svg 标签有 text 子元素，它再通过子元素 textPath 即文本路径来输出文本，代码样纸如下：
<svg>
<text>
<textPath xlink="#id">
输出的文本串写在这里
</textPath>
</text>
</svg>
textPath 有一个 xlink 属性，它用来绑定 svg 事先设计的路径id，如一楼的圆形路径id，等号后面id名称之前必须有井号（#）。这样 textPath 标签内的文本就能沿着那个路径呈现。
下面，我们把二楼的效果改装一下，不要圆的填充色，然后加入 text 标签系列代码，形成圆环文本输出效果：
<div style="margin: auto; width: 200px; height: 200px; font-size: 18px; border: 1px solid;">
<svg style="display: block; overflow: visible;">
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan1" fill="none" />
<text stroke="red"> <!-- 用 stroke 设定文本颜色 -->
<textPath xlink:href="#yuan1">ABCDEFGHIJKLMNOPQRSTUVWXYZ12345</textPath>
</text>
</svg>
</div>
字体大小我们在父盒子里定义，text标签会继承这个设置；path 元素的id设置为yuan1，因为二楼的path已经用了 yuan；svg 标签的style属性必须写，这样往大里调整字体大小时文字不会被“咬”残。我们故意把输出的字串写多一些，但它们不能全部显示，毕竟圆形环尺寸有限，从中也可以领会在一个圆环之上呈现文字的字数限定。
效果看下楼。
<div style="margin: auto; width: 200px; height: 200px; font-size: 18px; border: 1px solid;">
<svg style="display: block; overflow: visible;">
<path d="M 50 100 a 50 50 0 1 1 0 1 z" id="yuan1" fill="none" />
<text stroke="red">
<textPath xlink:href="#yuan1">ABCDEFGHIJKLMNOPQRSTUVWXYZ12345</textPath>
</text>
</svg>
</div>
通过以上示例，现在，如果设置一个圆形电子签章，应该可以了吧？ 考虑到不同字体它们的实际占位尺寸不一致，所以以上示例，应该定义字体，用 font-family ，可放在 div 或 svg 的style属性内：
font-family: '微软雅黑', '宋体';
如果使用微软雅黑，四楼的效果是，字母刚好能够全部显示，数字一个都没显示出来 装载文字的多少与字体、文字大小、圆环半径有关，做帖用到这个效果是可以依据需要考虑修改相关的值。另外，父盒子div的高宽尺寸设定应根据半径以及字体大小修改。 这个好，可以玩圆环状的文字了。黑黑辛苦了，这个说的特别清楚呢{:4_187:} <style>
.hxBox { margin-left: 10px; margin-top: 30px; width: 160px; height: 160px; font-family: '楷体','微软雅黑'; font-size: 24px;}
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>
<div class="hxBox">
<svg viewBox="0 0 100 100">
<path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
<text stroke="#330099">
<textPath xlink:href="#yuan">
中喜庆碧霄明月泛秋馨逸宇庭
</textPath>
</text>
</svg>
</div> 把樵歌的这个【中秋快乐】转轱辘 喜庆中秋
https://www.huachaowang.com/forum.php?mod=viewthread&tid=52749&fromuid=2
(出处: 花潮论坛)
用这个转圈的方式画出来了，这次真的画得够圆了@樵歌 {:4_173:} 红影 发表于 2022-3-11 13:58
把樵歌的这个【中秋快乐】转轱辘 喜庆中秋
https://www.huachaowang.com/forum.php?mod=viewthread&tid=52 ...
设计成环形也是可以的吧 不过还是圆形好看 红影 发表于 2022-3-11 13:27
这个好，可以玩圆环状的文字了。黑黑辛苦了，这个说的特别清楚呢
有部分参数省略了，反正不会去修改那几个固定画圆的参数，主要是理解圆心位置、半径就好 马黑黑 发表于 2022-3-11 16:46
设计成环形也是可以的吧
还是觉得圆形的好看{:4_173:} 马黑黑 发表于 2022-3-11 16:47
有部分参数省略了，反正不会去修改那几个固定画圆的参数，主要是理解圆心位置、半径就好
嗯嗯，主要是千面6个参数的使用{:4_187:} 红影 发表于 2022-3-12 15:49
嗯嗯，主要是千面6个参数的使用
关键的整明白就好 红影 发表于 2022-3-12 15:49
还是觉得圆形的好看
对，圆满嘛 马黑黑 发表于 2022-3-12 18:06
关键的整明白就好
嗯嗯，基本整明白了，只是位置不知道在哪调，我画的轱辘诗咋那么偏右啊。 马黑黑 发表于 2022-3-12 18:06
对，圆满嘛
从来不知道还可以这样让文字成圆圈的{:4_173:}