用svg画一个中间透明的关闭图标

一、背景和意义

关闭图标是网页中最常见的图标之一，使用png图片作为关闭图标是一种办法，但使用png图片性能稍差一些，且为了应对浏览器的夜间模式需要准备两套不同颜色的图片，而纯CSS实现的关闭图标性能更好且在夜间模式下自动调整颜色。之前有文章 《纯CSS实现中间透明的关闭图标》 介绍了结合使用CSS中的mix-blend-mode属性与svg实现中间透明的关闭图标的方法，但直接使用svg画一个中间透明的图标也是可以的，而且直接使用svg更方便移植和复用，本文给出svg实现的示例代码。

二、代码示例

创建一个HTML文件，其代码如下：

<style>
    .origin {
        width: 320px;
        height: 240px;
        background-size: cover;
        background-image: url("https://5b0988e595225.cdn.sohucs.com/images/20171010/2ab85e31fee24a36b3e9bb79d71885b2.jpeg");
    }
    .close {
        color: #fff;
    }
    .close svg {
        width: 100px;
        height: 100px;;
    }
</style>
<div class="origin">
    <a class="close" href="javascript:void(0)">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path
                fill="currentColor"
                d="M50,0 A50 50 360 1 1 49.99 0
                        M22 22 L22,32 L40 50 L22 68 L22 78 L32 78 L50 60 L68 78 L78 78 L78 68 L60 50 L78 32 L78 22 L68 22 L50 40 L32 22"
                        />
        </svg>
    </a>
</div>

运行之后的展示效果如下：

三、代码解读

3.1 颜色控制

fill="currentColor"表示关闭图标的颜色跟随字体颜色。在这里因为svg外层的a标签设置为白色，所以关闭图标是白色。如果想修改图标为灰色，则修改.close为：

    .close {
        color: #999;
    }

运行效果如下：

3.2 大小控制

.close svg控制了关闭图标的大小，前面例子中是设置长宽100px，如果要将图标改小一点，可以修改为：

    .close svg {
        width: 20px;
        height: 20px;;
    }

运行效果如下：

3.3 图形形状

控制图形形状的是path标签下的d属性：

    d="M50,0 A50 50 360 1 1 49.99 0
        M22 22 L22,32 L40 50 L22 68 L22 78 L32 78 L50 60 L68 78 L78 78 L78 68 L60 50 L78 32 L78 22 L68 22 L50 40 L32 22"

3.3.1 步骤1：画圆

其中M50,0 A50 50 360 1 1 49.99 0表示画外层的一个圆，其中各参数含义如下：

M50,0：定位到(50,0)这个坐标点；

A50 50：画半径为50的正圆（如果两个数值不相等则是画椭圆）；

360 1 1：画360度，即整个圆，后面的第一个1表示画大弧，也就是大于180度，第二个1表示按顺时针方向画；

49.99 0：终点的坐标，起点的坐标为(50,0)，终点的坐标按理来说应该也是(50,0)，但起点和终点一样会出问题，所以这里选择一个很接近于(50,0)的点即(49.99,0)。

3.3.2 步骤2：画叉叉

M22 22 L22,32 L40 50 L22 68 L22 78 L32 78 L50 60 L68 78 L78 78 L78 68 L60 50 L78 32 L78 22 L68 22 L50 40 L32 22表示画圆中间的小叉叉，其中M22 22表示定位到小叉叉左上角的那个点：

接下来的15个L是叉叉上沿着逆时针的15个点的坐标：

这15个点的坐标需要算一下，不过计算过程仅涉及两位数的加减法，一般只需要口算即可。

3.3.3 步骤3：填充颜色

前面一个圆和一个小叉叉的多边形时，两都的方向是相反的。圆是顺时针方向画，叉叉是逆时针方向画。

如果两图形的绘画方向相反（这一点很重要），那么两个图形中间的部分会自动填充颜色，故小叉叉内部就是透明的，形成一个中间透明的小叉叉效果。