摘要：先上图，这是我们想要实现的图标效果为了方便看出图标的轮廓，我们将背景上色。也就是说划定了应该显示的图像区域的起点位置以左上角为图像起点和大小，所以它包含四个数字类型参数，分别代表盒子左上角的坐标和它的宽度和高度。
先上图，这是我们想要实现的图标效果：
（为了方便看出svg图标的轮廓，我们将背景上色。）
此时我们使用
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）。
这时，我们依据
此时我们再来看看改代码下的结果：
与预期完全一致，完美解决！
通过这个小情境，实战了svg的viewBox属性的知识点，以更灵活运用，深入理解。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117163.html
摘要：先上图，这是我们想要实现的图标效果为了方便看出图标的轮廓，我们将背景上色。也就是说划定了应该显示的图像区域的起点位置以左上角为图像起点和大小，所以它包含四个数字类型参数，分别代表盒子左上角的坐标和它的宽度和高度。 先上图，这是我们想要实现的图标效果： showImg(https://segmentfault.com/img/bVblPou);（为了方便看出svg图标的轮廓，我们将背景上...
摘要：两种方法各有利弊，比较如下我喜欢将两种方法混起来用，创建两个一个小一点的包含常用的图标，作为内联元素放到每个页面中，大小以内。 iconfont解决了我们以前大量使用小图标带来的种种问题，但是也有自身的各种缺陷。比如不支持多色，不同浏览器下的表现不同，需要做各种兼容等。 不久的将来iconfont应该会被svg symbol技术替换。本文就是介绍如何在网页中使用SVG图标。顺带一提蚂...
摘要：简介是什么就像名字一样，就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成有何优势轻量性一个图标字体比一系列的图像特别是在屏中使用双倍图像要小。问题很小创作自已的字体图标很费时间，重构人员后期维护的成本偏高。 简介 - iconfont是什么？ 就像名字一样，iconfont就是图标字体，像雅黑字体，思源字体一样，这种字体就是由图标构成~ - 有何优势？ 1、轻量性：一个图...
摘要：由于项目的不断扩大，只会影响我们定位功能和问题的速度，因此对冗余文件进行清理，是很重要的。我们在项目中使用的，自动将各个图标进行。 进入公司之后，接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档，但是由于项目过于庞大，老旧。包含了打包过慢，冗余文件过多等诸多问题。想要快速的解决这些问题，想要完全把功能重构一遍的话，成本太高了。一个一个文件来过，时间成本也比较大。...
摘要：已经被添加入库的图标会以虚线框起来，以鉴别是否重复选取。点击右上角的购物车小图标，选择添加至项目。创建项目并加入此新项目。将代码引入页面中，一般放在标签内即可。这是一种最新的引入方式，也是未来主流的方式。 在我们使用CSS对页面进行编辑布局时，经常会用到一些小图标或者logo。常见的比如我们在制作个人主页时，使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题：去哪...
阅读 3097·2023-04-26 00:58
阅读 1050·2021-09-22 16:04
阅读 3092·2021-09-02 15:11
阅读 1372·2019-08-30 15:55
阅读 2115·2019-08-30 15:55
阅读 3071·2019-08-23 18:41
阅读 3319·2019-08-23 18:18
阅读 2642·2019-08-23 17:53
