css图标合并——ClipPath Sprites技术

已于 2024-08-13 15:53:55 修改
阅读量844 收藏
点赞数
分类专栏： # CSS # 已归档链接 文章标签： css 前端
于 2021-11-10 14:20:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/121242735
版权

为了方便图标管理，往往会把众多小图标合在一个SVG元素中，这种处理技术称为“ClipPath Sprites技术”。

实现原理：使用clip-path对合并后的内联svg图标进行裁剪显示。

注意事项：
内联的SVG元素不能使用display:none或者visibility:hidden进行隐藏，否则剪裁元素会被隐藏，并且此技术只适合填充模式的小图标，不适合描边小图标。

1. 合并图标得到ClipPath Sprites代码

打开图标合并工具 https://www.zhangxinxu.com/sp/svgo/
通过上传或粘贴的方式，将原始svg小图标添加到合并工具中，工具会自动生成ClipPath Sprites代码

例如添加了以下两个图标
在这里插入图片描述
自动生成的ClipPath Sprites代码在工具最下方
在这里插入图片描述

2. 将ClipPath Sprites代码复制粘贴到页面中

    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="0"
      height="0"
      style="position:absolute;"
    >
      <clipPath id="1636507720028" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"
        />
      </clipPath>
      <clipPath id="1636507708197" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"
        />
      </clipPath>
    </svg>

为了方便区分图标，你可以将id修改为图标的名称（中英文不限）

    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="0"
      height="0"
      style="position:absolute;"
    >
      <clipPath id="小铃铛" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"
        />
      </clipPath>
      <clipPath id="电话簿" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"
        />
      </clipPath>
    </svg>

3. 在页面中渲染小图标

使用i标签进行渲染，样式为自定义的myIcon，在style的css变量–clipPath中，url()函数引用对应图标的id即可。

<i class="myIcon" style="--clipPath:url(#电话簿)"></i>

.myIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  clip-path: var(--clipPath);
  vertical-align: middle;
  margin-right: 1ch;
}

页面效果为
在这里插入图片描述

完整代码范例

在这里插入图片描述

<template>
  <div>
    <ul>
      <li><i class="myIcon" style="--clipPath:url(#电话簿)"></i>电话簿</li>
      <li><i class="myIcon" style="--clipPath:url(#小铃铛)"></i>小铃铛</li>
    </ul>

    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="0"
      height="0"
      style="position:absolute;"
    >
      <clipPath id="小铃铛" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"
        />
      </clipPath>
      <clipPath id="电话簿" fill="none">
        <path
          transform="scale(0.044643, 0.039063)"
          d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"
        />
      </clipPath>
    </svg>
  </div>
</template>

<style scoped>
.myIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  clip-path: var(--clipPath);
  vertical-align: middle;
  margin-right: 1ch;
}
</style>
朝阳39
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android 10.0 systemui状态栏充电状态下电池电量100%时显示闪电图标问题解决
安卓兼职framework和app工程师的博客
08-15 385
在10.0的系统rom定制化开发中，在系统systemui状态栏的充电过程中，都会显示充电闪电图标，但是在某些情况下充电100%的时候也会显示 充电图标就不对了，接下来分析下充电过程，然后看下解决这个问题
前端——CSS学习（效果和动画）
xzy990727的博客
07-23 513
CSS效果 - 效果属性 1.box-shadow 投影 （1）含义：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 （2）语法 {box-shadow: h-shadow v-shadow blur spread color inset;} 对象选择器 {box-sh...
如何合并两个图标库
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
11-01 6448
最近在项目中碰到了要合并两个icon库的需求：我们项目本来用的是bootstrap提供的glyphicons，但是现在需要用一个别的库的icon，想把这两个库合并在一起供项目使用，研究了一番后整理个教程吧~利用https://icomoon.io/app/#/select 这一工具进行这两种图标库的合并，操作步骤如下：导入图标库点击页面左上角的import icons，分别导入我们本地的两个字体，注
浅谈css中图片定位之所有图标放在一张图上
dengxingbo的专栏
03-15 4799
http://www.qiqiboy.com/2009/11/26/css-image-orientation-and-all-images-in-a-picture.html      如今做网页为了使网站丰富多彩，富于表现力，往往需要应用大量的图片/图标。如何处理这些图片，使其尽量不影响网页载入，解析等速度，是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比，但是需要等待较
​​css中clip-path学习与应用​​
最新发布
m0_48738983的博客
07-19 341
css的clip-path
CSS Sprites合并图片
zhangweikai的专栏
08-29 699
http://cn.spritegen.website-performance.org/
css sprites 图标合并工具网站
weixin_30360497的博客
02-22 118
https://www.toptal.com/developers/css/sprite-generator 转载于:https://www.cnblogs.com/liubingyjui/p/10419833.html
CSS 和 JS 文件合并工具
azhen5222的博客
09-03 325
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一. 本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理. CSS 和 JS 合并工具的发...
Flutter开发之——ClipPath，Android面试题及答案2020
m0_64382950的博客
11-25 94
const ClipRect({ Key? key, this.clipper, this.clipBehavior = Clip.hardEdge, Widget? child }) 属性说明 | 属性 | 说明 | 取值 | | :-: | :-: | :-: | | clipper | 定义裁剪规则 | CustomClipper | | clipBehavior① | 裁剪方式 | Clip枚举 | | child | 被裁剪组件 | Widget | clipBehavior① | 属性 | 说明
【Flutter实战静态页面】--在线点餐app（9）——详情框架+ ClipPath 实现任意形状
weixin_46065358的博客
03-27 1205
无
css特效之水滴效果
qq_46063425的博客
08-18 1049
css特效之水滴效果 想看看效果： html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div class="contain
css js 合并工具
04-23
css js 合并工具
js css文件合并工具
04-26
用于将项目中的多个js或者多个css文件自动合并成为1个，减少网络请求次数，从而达到网站性能优化的目的
有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位
u013179804的博客
04-29 976
图像精灵（Sprite），也称为雪碧图、CSS 雪碧、CSS Sprite，是一种 CSS 图像合成技术，它将多个小图标或图片合并到一个单独的图像文件中，然后通过 CSS 的背景定位属性来显示需要的部分。图像精灵主要用于解决 img 标签在加载多张小图标或图片时产生的 HTTP 请求过多、页面加载速度慢等问题。比如，wyy音乐的这块，用的就是精灵图。将多个小图标或图片合并到一个文件中，减少了浏览器向服务器发送的 HTTP 请求次数，提高了页面加载速度。
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
weixin_42114041的博客
08-03 605
CSSSprites的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。介绍了CSSSprites技术的实现方法，优点和缺点。最后通过实例CSSSprites技术制作导航栏演示CSSSprites的使用。CSS Sprites的原理：将小图片整合到一张大的图片上，根据具体图标在大图上的位置，给背景定位。css中用一张背景图做页面的技术有什么优势？如上图如果一个页面需要用...
网页中多个图标在一张图片上，使用css将各图标显示
m0_70752874的博客
11-27 334
【代码】网页中多个图标在一张图片上，使用css将各图标显示。
js合并.css合并工具
weixin_30517001的博客
08-19 84
http://www.neoease.com/css-javascript-combo-tool/ http://www.neoease.com/minimize-javascript-files-using-ycombo/ 转载于:https://www.cnblogs.com/silentjesse/p/3921215.html
MVC系列学习(十三)-合并JS和CSS
weixin_30674525的博客
05-12 128
1.先来看看，不用合并js的情况，传输量大 1.1新建一个 【基本】的mvc项目 然后新建一个控制器HomeController，因为js会在很多视图中用到，所以此时我们添加一个视图带布局页Index视图。为了更好的看到效果，我们删除掉会影响效果的东西。 2.2视图中的代码，超简洁 2.3开始测试 运行视图，然后在HttpWatch监视发送的请求 发现了，此次请求Index.c...
Canvas.clipPath
07-22
Canvas.clipPath() 方法用于设置一个路径作为剪切区域，只有在该区域内的内容才会被绘制。 要使用 Canvas.clipPath() 方法，您需要首先创建一个 Path 对象，然后使用 Path 类的方法来定义路径的形状。然后，将该 Path 对象传递给 Canvas.clipPath() 方法，以将其设置为剪切区域。 以下是一个示例代码段，展示了如何使用 Canvas.clipPath() 方法： ```java // 创建一个 Path 对象并定义路径的形状 Path path = new Path(); path.addCircle(centerX, centerY, radius, Path.Direction.CW); // 将该 Path 对象设置为剪切区域 canvas.clipPath(path); // 在剪切区域内绘制内容 canvas.drawRect(left, top, right, bottom, paint); ``` 在上述示例中，我们创建了一个圆形的 Path 对象，并将其设置为剪切区域。然后，我们使用 Canvas.drawRect() 方法在剪切区域内绘制一个矩形。 通过使用 Canvas.clipPath() 方法，您可以实现各种有趣的剪切效果，例如圆角矩形、不规则形状等。请根据您的需求使用不同的 Path 对象来定义不同的剪切区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值