SVG图标跑到哪里了？

huashiou 发布于2019-08-30 15:55 / 1552人阅读

摘要：先上图，这是我们想要实现的图标效果为了方便看出图标的轮廓，我们将背景上色。也就是说划定了应该显示的图像区域的起点位置以左上角为图像起点和大小，所以它包含四个数字类型参数，分别代表盒子左上角的坐标和它的宽度和高度。

先上图，这是我们想要实现的图标效果：

（为了方便看出svg图标的轮廓，我们将背景上色。）
此时我们使用

但我们运行之后得到的结果却是这样的：

很明显，图标过大，已经超出了svg的viewport所能显示的范围，那么这时我们怎么办呢？
聪明的同学可能已经想到了，就是使用svg的viewBox属性，我们先来看MDN对该属性的定义：

The viewBox attribute defines the position and dimension

什么意思呢？其实就只有两个关键字： position：位置，以及dimension：尺寸。
也就是说viewBox划定了viewport应该显示的图像区域的起点位置（以viewBox左上角为图像起点）和大小，所以它包含四个数字类型参数，viewBox="min-x min-y w h"分别代表viewBox盒子左上角的坐标（min-x min-y）和它的宽度和高度（w h）。
这时，我们依据路径实际的尺寸，将viewBox设置之后如图：

此时我们再来看看改代码下的结果：

与预期完全一致，完美解决！

结语

通过这个小情境，实战了svg的viewBox属性的知识点，以更灵活运用，深入理解。

GPU云服务器云服务器网络图标不见了网络连接图标不见了阿里的云服务器放在了哪里买了云服务器在哪里找到

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117163.html

像打字一样插入图标-iconfont

摘要：简介是什么就像名字一样，就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成有何优势轻量性一个图标字体比一系列的图像特别是在屏中使用双倍图像要小。问题很小创作自已的字体图标很费时间，重构人员后期维护的成本偏高。简介 - iconfont是什么？就像名字一样，iconfont就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成~ - 有何优势？ 1、轻量性：一个图...

warkiz 2019-08-29 16:58 评论0 收藏0
借助webpack对项目进行分析优化

摘要：由于项目的不断扩大，只会影响我们定位功能和问题的速度，因此对冗余文件进行清理，是很重要的。我们在项目中使用的，自动将各个图标进行。进入公司之后，接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档，但是由于项目过于庞大，老旧。包含了打包过慢，冗余文件过多等诸多问题。想要快速的解决这些问题，想要完全把功能重构一遍的话，成本太高了。一个一个文件来过，时间成本也比较大。...

Me_Kun 2019-08-22 16:17 评论0 收藏0
CSS小技巧（一）：iconfont的使用

摘要：已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。点击右上角的购物车小图标，选择添加至项目。创建项目并加入此新项目。将代码引入页面中，一般放在标签内即可。这是一种最新的引入方式，也是未来主流的方式。在我们使用CSS对页面进行编辑布局时，经常会用到一些小图标或者logo。常见的比如我们在制作个人主页时，使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题：去哪...

baiy 2019-08-30 15:54 评论0 收藏0