用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:填充颜色

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

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

相关推荐
彭世瑜17 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40418 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish18 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five20 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序20 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54120 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省21 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98522 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮23 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code24 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript