CSS 绘制任意角度扇形-SVG

熟悉 SVG

感兴趣的话可以参考这个文档进行学习: developer.mozilla.org/zh-CN/docs/… 。下面的内容只做简单的讲解

• SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形
• SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，
• 或者将这两种方式结合起来创建图形。
• 图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

基本要素

• HTML 提供了定义标题、段落、表格等等内容的元素。
• 与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。
• 一个简单的 SVG 文档由 <svg> 根元素和基本的形状元素构成。
• 另外还有一个g元素，它用来把若干个基本形状编成一个组。
• SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，
• 但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

实现扇形

一, 实现容器

<svg width="200" height="200"></svg>

• 首先我们根据语法, 先设置定义 200 * 200 的容器
• 之后的图形都要在这个容器内

二, 画一个圆形

<svg width="200" height="200">
    <circle cx="100" cy="100" r="80"/>
</svg>

• 通过 cx 和 cy 可以确定圆心位置, r 表示圆的半径

三, 设置一个外轮廓

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        stroke-width="40"
        stroke="red"
        stroke-opacity="0.5"
    />
</svg>

• 我给 circle 设置了一个外轮廓, 宽度是 40, 颜色是 red, 透明度是 0.5
• 从图上我们可以看出来, 轮廓一半在圆内一半在圆外, 那当 stroke-width=160 时, 轮廓也会变成一个圆, 记住这个结论一会儿要用到
• circle渲染出来的圆是没办法变成扇形的, 所以我们就考虑用他的轮廓去实现
• 那具体要怎么做呢? 我们继续往下看

四, 设置外轮廓的样式

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        stroke-width="40"
        stroke="red"
        stroke-opacity="0.5"
        stroke-dasharray="20 80"
    />
</svg>

• stroke-dasharray 控制描边(轮廓)的点划线的图案范式
• 示例是从箭头处开始(90度), 先画 20px 再空白 80px, 重复这样的操作

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="80"
        stroke="red"
        stroke-width="40"
        stroke-opacity="0.5"
        stroke-dasharray="251 502"
    />
</svg>

• 251 = 3.14(π) * 80(r) 同样 502 = π * r * 2
• 为什么第二个是周长(2πr), 空白是周长的话, 第一个参数是多少都是可以满足要求的
• 所以想要多大的角度算一下线的长度就可以了即: (deg / 360) * (π * r * 2)
• 再来算一下我们这个示例 (180 / 360) * (3.14 * 80 * 2) = 251

四, 实现最终效果

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="50"
        fill-opacity="0"
        stroke="red"
        stroke-width="100"
        stroke-dasharray="175 314"
    />
</svg>

• 如果半径为 80 那我们的 stroke-width 需要设置为 160(半径的2倍) 才能保证是圆形不是环形
• 为了保证不超出容器, 我设置半径为 50, stroke-width 为 100;
• 我们根据 200度, 半径 50 重新计算 stroke-dasharray="175 314"
• 内部的圆形是没有用的, 我们设置为透明 fill-opacity="0"

小结

• 为了方便计算，文章中 π 我们直接用 3.14 计算了，建议还是用 π 的值进行计算
• 这就是一步一步的处理过程了
• 下期我做一个简单的总结

参考文档

developer.mozilla.org/zh-CN/docs/…

相关文档