首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

该如何正确的使用SVG sprites?

大家都知道svg( Scalable Vector Graphics)可伸缩矢量图形,SVG是一种采用XML 来描述二维图形的语言,无论如何放大缩小都不会糊,而图片当展示的尺寸大于图片本身...结果是否定的,什么都不会显示: 那么该如何摆正姿势,正确的使用它呢?高潮部分来了: 首席填坑官∙苏南的专栏 为什么图标会显示呢?...因为要显示图标,我们还需要使用元素,通俗的讲就是你定义了一组图形对象(使用元素)之后,可以使用元素来对它进行无限次实例化展示。...你使用xlink:href属性来指定你想要展示哪一组图标(相当于css图片精灵中的background-position),这里,我们要展示的是id为#svg-github的,       ...,新手上路中,如果文章中有不对之处,烦请各位大神斧正。

2.2K20

该如何以正确的姿势插入SVG Sprites?

symbol元素对图形的作用是在同一文档中多次使用,添加结构和语义,SVG是无论如何放大缩小都不会糊,而图片当展示的尺寸大于图片本身,就会糊了,糊了,糊了…… 1.1 回顾 Css Sprites 那么该如何摆正姿势( 你随意就好),正确的使用它呢?...因为要显示图标,我们还需要使用元素,通俗的讲就是你定义了一组图形对象(使用 元素)之后,可以使用元素来对它进行无限次实例化展示。...你使用xlink:href属性来指定你想要展示哪一组图标(相当于css图片精灵中的background-position),这里,我们要展示的是id为#svg-github的,细心的宝宝们可能还发现了style..., IE9以上大多数人还是能接受啦,特别是手机端的用户,再也不用担心测试MM来找你,图标不清晰的问题了啦,是不是很开心,有没有~~ 总结: Svg Sprites相比Css Sprites,不管是在维护和开发的过程中

65540
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【编程基础】Android中如何获取资源的尺寸?

    在Android中为了实现不同屏幕的适配,经常会用到在不同dimen.xml文件中对于同一dimen ID定义不同的大小,然后在代码中通过getDimension函数来获取,下面就来说说几种getDimension...getDimension()是基于当前DisplayMetrics进行转换,获取指定资源id对应的尺寸。文档里并没说这里返回的就是像素,要注意这个函数的返回值是float,像素肯定是int。...getDimensionPixelOffset()与getDimension()功能类似,不同的是将结果转换为int,并且偏移转换(offset conversion,函数命名中的offset是这个意思...由此可见,这三个函数返回的都是绝对尺寸,而不是相对尺寸(dp\sp等)。...我用的手机的density是2.0所以所以会乘以2。

    2.5K70

    如何正确使用go中的Context

    今天跟大家聊聊context的设计机制及如何正确使用。 01 为什么要引入Context context.Context是Go中定义的一个接口类型,从1.7版本中开始引入。...下面是一个使用Context的简易示例,我们通过该示例来说明父子协程之间是如何传递取消信号的。...下面我们介绍父协程是如何将信号通过通道传递给子协程的。 3.3 父协程是如何取消子协程的 我们发现在Context接口中并没有定义Cancel方法。...我们从处理一个请求时经过的多个协程来角度来理解会更容易一些。当一个请求到来时,该请求会经过很多个协程的处理,而这些协程之间的关系实际上就组成了一个树形结构。...要想正确的在项目中使用context,理解其背后的工作机制以及设计意图是非常重要的。

    2.5K10

    如何正确的清理MySQL中的数据

    如何正确的清理MySQL中的数据 1. 为什么删了数据,表文件大小没有变 1.1 数据删除流程 删除记录,只会将记录标记为删除,表示该位置可以服用。 数据数据页,表示数据页可以复用。...使用 delete 删除所数据,所有的数据页会被标记为可复用,但是磁盘空间的占用没有变化。 1.2 数据空洞 删除,插入等操作会使数据页上出现空元素,也叫做数据空洞。 2....如何避免数据空洞 假设数据表A中存在大量数据空洞,解决的办法就是重建表。 2.1 重建表的流程 建立临时文件,扫描表A主键的所有数据页。 利用表A的记录生成B+树,存储到临时文件X。...生成的临时文件的过程中,所有对表A的操作记录在日志文件中。 临时文件X生成后,将日志文件应用到临时文件,得到新的临时文件 用临时文件 替换表A的数据文件。...2.2 什么是Online DDL 在复制表的同时,将对表的操作,写入日志文件,之后再将日志文件应用到复制文件上,实现复制表的时候,不阻塞其他对表的写入操作,因此称为Online DDL。

    4.7K30

    Java 开发中如何正确的踩坑

    这个手册目的就是让我们尽可能少踩坑,杜绝踩重复的坑。我接下来就打算试着写一些“坑”出来,来看看我们如何一不留神踩坑的,以及如何用正确的姿势跳出坑。...踩坑姿势:其实就是尽管你在之前做了对象不为空的判断,但你并不能保证对象中的值不为空,而且这时候去级联调用就会抛 NPE 。 手册中关于 NPE 的描述: 防止 NPE 是调用者的责任。...踩坑姿势:可能我们知道 ConcurrentHashMap 的 K/V 都不能为空,但我们有时候并不知道传进来的值是否为空。 解决方案:设置时做下检验,对它的特性正确理解及使用。...集合中的 subList 是用于来返回某一部分的视图内容的,可能我们不是很常用,但是其中有好多坑的,直接看代码: ?...从上述代码中,我们应该可以得出如下结论:返回的新集合是靠原来的集合支持的,修改都会影响到彼此对方。

    1K20

    Java开发中如何正确的停掉线程?

    线程是 Java 编程中非常重要的一部分,它可以将一个程序并行执行,同时也是异步编程的基础。在 Java 应用程序中,当我们开启了一个线程后,如果这个线程不再被需要,我们就需要合理地停掉这个线程。...本篇文章将为您讲解如何正确地停掉线程。 在 Java 中,停掉线程最简单的方法就是使用 Thread 类提供的 stop() 方法。stop() 方法可以直接停掉一个正在运行的线程。...我们可以在程序中定义一个布尔型变量,用来表示线程是否需要继续执行。每次在线程体内部判断这个标志位,如果标志位为 false,则退出线程体即可。...在后续的操作中,如果检测到自己被标记为已中断,我们就可以主动终止运行。...2、确保正确地释放资源,关闭流等操作,避免资源泄漏。 3、不要在 stop() 方法中执行过多的操作,否则容易导致死锁、阻塞等问题。 总之,正确地停掉一个线程并没有一个“万能”的方法。

    17010

    如何正确实现Java中的hashCode方法

    你知道一个对象的唯一标志不能仅仅通过写一个漂亮的equals来实现 太棒了,不过现在你也必须实现hashCode方法。 让我们看看为什么和怎么做才是正确的。...HashCode 准则 引用自官方文档 hashCode通用约定: * 调用运行Java应用程序中的同一对象,hashCode方法必须始终返回相同的整数。...所以用于哈希组字段应该相等时使用的字段的子集。默认情况下都使用相同的字段,但有一些细节需要考虑。 一致性 首先,有一致性的要求。它应该相当严格。...一个算法返回变化多端的哈希码,即使对于非常相似的对象,是一个好的开始。 怎样才能达到上面的效果部分取决于选取的字段,我们在计算中包含更多的细节,越有可能获取到不同的哈希码。...当我们处理f(x) = -x线上的点时,线上的点都满足:x + y == 0,将会有大量的碰撞。 但是:我们可以使用一个通用的算法,只到分析表明并不正确,才需要对哈希算法进行修改。

    1.9K90

    OpenCV中如何正确的给文字区域加上底色

    ,但是这个可视化显示,OpenCV可以做的非常好,给人很直观的感觉。...图示如下: 如何生成这种显示 OpenCV中有个获取字体跟文本宽高的函数,调用该函数可以获取 Size cv::getTextSize( const String &...字体大小 int thickness, // 字体线宽 int * baseLine // 基线对齐位置) 其中基线对齐位置baseline 参数 是一个很trick的参数...,在绘制底色跟绘制文本的时候必须要考虑进去,这个可以看后面的演示代码。...返回的参数类型是cv::Szie文本区域的宽度与长度,有这个就可以根据它完成在文本框上方的文字底色矩形区域绘制,然后在把相关的文本通过putText绘制完成,这样就实现了如下图中显示效果 相关的代码显示如下

    2.7K40

    UI界面图标终极设计指南

    通常情况下,线的倾斜角度在45°,30°,60°的时候,清晰度会比一些不常见的角度效果会更好,比如13.7°,81°等等。所以,尽量避免用这样的数值。 ?...6 保持图标风格统一 下面的两幅图可以很好的展示正确的和错误的例子,比如一套家具的图标,如果一个图标的绘制角度是斜45°,那么其他的图标也尽量保持这样的角度。而不能一个是正视,一个是斜视。...9 清理SVG图标中的垃圾代码 我们都知道SVG图标最终是一串代码。在Sketch中生成的SVG图标通常会包含很多不必要的冗余代码,比如组,颜色图层还有遮罩。...我们把Sketch生成的SVG图标在AI中打开的时候,你会发现它的图层非常混乱。这些混乱的图层都可以会让前端开发工程师在转换代码的时候出现问题。 ?...静电杂谈:如何做一个“有特色”的UI设计师 交互工具哪个好用?来看看静电的具体分析~ 2019即将过半,UI设计师在激烈的从业环境如何提升 平面设计师如何快速转行UI设计行业?

    1.1K50

    干货:如何正确地学习数据科学中的Python

    实际上,为了完成这些任务,你必须将大部分时间集中在学习 python 中的模块和库上。 ?...在这个阶段,我建议你快速学习如何在 Matplotlib 中创建基本图表,而不是专注于 Seaborn。 我写了一个关于如何使用 Matplotlib 开发基本图的教程,该教程由四个部分组成。...如何使用 SQL 和 python 数据有组织地驻留在数据库中。因此,你需要知道如何使用 SQL 检索数据,并使用 python 在 Jupyter Notebook 中执行分析。...接下来,你的目标是实现在 Python 中学习的基本概念。StatsModels 是一个流行的 python 库,用于在 python 中构建统计模型。...另一种方法是将数据科学应用到你感兴趣的领域。例如,如果你想预测股票市场价格,那么你可以从 Yahoo Finance 中获取实时数据,并将其存储在 SQL 数据库中,然后使用机器学习来预测股票价格。

    1.3K20

    Python高效办公|如何正确处理word中的表格

    项目由来 很久没更新Python高效办公系列的文章啦,最近就遇到一个很适合Python来做的一件事情,分享给大家。...X是8位,很好提取,直接用\d{8}就行;但是7位的Y就不能直接这样写,因为这样也会匹配到X中的数字(因为X有8位,7位小于8位,会匹配到),所以我们需要在前面和后面加上英文逗号,加以限制。...最后,要解决的就是如何读取word中的表格,和读取后怎么写入excel表中。这两个问题使用docx和xlwt库即可,别忘记安装这两个库。...workbook.add_sheet('点位') sheet.write(0, 0, "点位") sheet.write(0, 1, "X") sheet.write(0, 2, "Y") # 读取word,并获取word中的第一个表...j = 1 # 读取word表中的数据,正则表达式提取后写入excel中。

    2.3K10

    干货:如何正确地学习数据科学中的 python

    实际上,为了完成这些任务,你必须将大部分时间集中在学习 python 中的模块和库上。他认为,学习数据科学的正确姿势应该如下文,AI 开发者进行了编译整理。...在这个阶段,我建议你快速学习如何在 Matplotlib 中创建基本图表,而不是专注于 Seaborn。 我写了一个关于如何使用 Matplotlib 开发基本图的教程,该教程由四个部分组成。...如何使用 SQL 和 python ---- 数据有组织地驻留在数据库中。因此,你需要知道如何使用 SQL 检索数据,并使用 python 在 Jupyter Notebook 中执行分析。...学习和 python 相关的基本统计学知识 ---- 多数有抱负的数据科学家在不学习统计学的基础知识的情况下,就直接跳到机器学习知识的学习中。 不要犯这个错误,因为统计学是数据科学的支柱。...接下来,你的目标是实现在 Python 中学习的基本概念。StatsModels 是一个流行的 python 库,用于在 python 中构建统计模型。

    1.1K21

    如何正确释放文件句柄,Java中的FileInputStream关闭问题

    在日常的编程开发中,我们经常需要读取文件并对其进行处理。在Java中,常用的文件读取类之一是FileInputStream。...否则,可能导致文件句柄占用,进而影响文件的删除等操作。最近我在完成一项任务时遇到了这样的问题。任务是将国内的订单生成CSV文件,并通过FTP推送给法国的同事。...上传FTP后,本地的文件需要被删除以释放空间。然而,删除文件时却遇到了失败的情况。经过排查,最终发现了问题所在:没有正确关闭FileInputStream导致文件句柄未被释放。...在Java中,使用FileInputStream读取文件时,如果没有在读取完成后手动关闭流,就会导致文件句柄一直被占用。...这样可以确保文件在不再需要时能够被正确地释放,从而避免文件句柄被占用的问题。

    1K10

    如何在JavaScript中获取单选按钮组的值?

    在实际业务开发中,我们常常需要获取用户选择的单选按钮的值,比如用户在注册时选择性别、问卷调查时选择答案等。今天,我们就来聊聊如何在JavaScript中获取单选按钮组的值。...实际业务场景 假设我们正在开发一个用户注册页面,用户需要选择他们的性别。我们使用了一组单选按钮来表示性别选项。...id="genderf" name="gender" value="female" checked /> 女 在这个例子中,...获取单选按钮组的值 在JavaScript中,我们可以使用document.querySelector方法来获取被选中的单选按钮,然后通过它的value属性来获取对应的值。...结束 在业务开发中,使用JavaScript来获取单选按钮组的值非常简单。我们只需要利用document.querySelector方法来获取被选中的单选按钮,然后通过value属性来获取其值。

    18410

    如何在 HTML 中实现响应式设计以适应不同设备的屏幕尺寸?

    要在HTML中实现响应式设计以适应不同设备的屏幕尺寸,可以使用CSS媒体查询和流动布局。...以下是实现响应式设计的一些关键步骤: 使用CSS媒体查询:CSS媒体查询允许根据屏幕尺寸和设备特性应用不同的CSS样式。...通过在CSS中使用@media规则,并指定不同的屏幕尺寸和样式,可以根据不同设备的屏幕尺寸来加载适当的样式。...and (min-width: 1025px) { /* 在屏幕宽度大于1025px时应用的样式 */ } 使用流动布局:流动布局允许元素根据屏幕尺寸自动调整大小和位置,以适应不同的设备。...通过将图像和文本包装在一个容器中,并使用CSS使其在不同设备上显示不同的布局,可以实现响应式的媒体对象。 通过结合使用这些技术和工具,可以实现在HTML中进行响应式设计以适应不同设备的屏幕尺寸。

    17610

    如何从技术演进的角度去剖析服务治理中的注册中心

    Producer 从技术演进的角度去剖析注册中心为什么会存在,存在的价值时什么?没有注册中心之前,Producer和Consumer之间如何完成高效的通信?...进程(Linux)间的通信方式有: 管道 消息队列 共享内存 信号量 Socket java中如何完成一次Consumer到Producer的调用,肯定我们一下子就联想到Socket和HTTP/HTTPS...,可以这样梳理,java中能够完成一次通信的方式有如下: Socket RMI WEBService HTTP/HTTPS file 存储 大名鼎鼎的Dubbo和SpringCloud,就是基于如上的通信方式封装的...Consumer Consumer本质上和 Producer一样,也是一个客户端,但是从通信的上行和下行的角度考虑,刚好相反。...注册中心 抛开注册中心,Producer和Consumer是可以直接通信的,但是为什么要去搞注册中心,从技术服务业务问题的角度去剖析,肯定会有他存在的道理。

    64820
    领券