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

一、背景和意义

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

二、代码示例

创建一个HTML文件,其代码如下:

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为:

html 复制代码
    .close {
        color: #999;
    }

运行效果如下:

3.2 大小控制

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

html 复制代码
    .close svg {
        width: 20px;
        height: 20px;;
    }

运行效果如下:

3.3 图形形状

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

html 复制代码
    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:填充颜色

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

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

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫2 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel3 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼4 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法7 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode8 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu8 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu8 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript