svg：设置path路径画圆形

马黑黑 · 发表于 2022-3-11 11:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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>

效果请看楼下。

马黑黑 · 发表于 2022-3-11 11:38

马黑黑 · 发表于 2022-3-11 11:38

本帖最后由马黑黑于 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"> 
                     <textPath xlink:href="#yuan1">ABCDEFGHIJKLMNOPQRSTUVWXYZ12345</textPath>
            </text>
      </svg>
</div>

字体大小我们在父盒子里定义，text标签会继承这个设置；path 元素的id设置为yuan1，因为二楼的path已经用了 yuan；svg 标签的style属性必须写，这样往大里调整字体大小时文字不会被“咬”残。我们故意把输出的字串写多一些，但它们不能全部显示，毕竟圆形环尺寸有限，从中也可以领会在一个圆环之上呈现文字的字数限定。

效果看下楼。