深入解析HTML5使用SVG图像时的viewBox属性用法_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了深入解析HTML5使用SVG图像时的viewBox属性用法_html5教程技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12649字，纯文字阅读大概需要19分钟。
内容图文
快速了解viewBox的参数
viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的，你甚至可以在这个坐标系统的边界之外的地方绘制图形；但是这些相对于SVG视窗定位的图形，也可以由用户坐标系的位置来控制。
viewBox属性使用四个参数来指定坐标系原点的位置以及它的尺寸：x y width height。初始情况下，这个坐标系等同于初始化的视窗坐标系（由SVG图像的width和height确定），而且它的原点是在(0, 0)——即SVG的左上角。
通过改变x和y这两个参数的值，可以调整原点的位置。改变width和height的值，可以改变坐标系统的尺寸。只使用viewBox属性，就可以帮你扩展或裁剪SVG画布。跟着示例一起阅读。
重要提示：在本文章中，我不会改变viewBox在SVG视窗内的默认行为（比例和位置）。因为，根据属性的默认行为，viewBox的内容会被尽可能地完全包含在视窗内，然后放置在中心位置。不过，使用preserveAspectratio属性可以让你自由地改变viewBox的尺寸和位置，但是在这篇文章中，这不是必需的技术，所以我们也不会在这里深入讲解。
使用viewBox裁剪SVG，即使用viewBox属性制作Art Direction的SVG
前阵子，我的一个客户要求把他网站的SVG头像按照不同的屏幕尺寸设置成不同的大小，从而使得它只有一小部分是在小屏幕上可见的，在中等的屏幕尺寸上可以看到再大一点的部分，然后在大屏幕上可以看到完整的内容。当时我脑子里首先出现的想法就是，他的要求其实是使用viewBox属性来裁剪SVG图像，然后根据不同的屏幕尺寸，显示他想要看到的图像的某部分。
通过改变SVG坐标系统的尺寸和原点位置，我们可以把SVG进行裁剪，并显示我们希望在视窗中显示的那部分内容。
我们来看看如何实现。
假设我们有如下这张完整的SVG图像，然后我们想要把它裁剪成小屏幕的尺寸。这张图是Freepik设计的可免费使用的房屋矢量图，该图片有Creative Commons Attribution 3.0 Unported协议的许可授权。为了简单起见，我们先假设图像只是要被裁剪成在中小屏幕上显示的内容，以及大屏幕上显示的完整的内容，如下所示。
左边的图的是我们将要使用viewBox属性裁剪的完整的图片，右边的图是我们希望在小屏幕上显示的区域。
现在，通过改变viewBox属性的值来裁剪SVG。有一些需要考虑的内容，我们等下会讲到。但是首先，我们要改变坐标系统，让它匹配上面的图片中虚框矩形区域的内容。，通过调整系统的原点以及width和height的值，我们可以改变它初始的0 0 800 800参数值。
但是我们要如何获知新坐标和新尺寸呢？重点是不要经过大量重复的实验和错误。
有几种方式。因为我们已经在图形编辑器中（我的示例使用的是AI），我们可以使用编辑器的面板来获取元素的位置和尺寸。
我画这个虚线的矩形框，除了用来表示我想要在小屏幕上显示的内容，还有一个原因就是：我们可以获取这个矩形的位置和尺寸，然后把它们作为viewBox的值来使用。使用AI的变换面板（如下图），我们获取了我们需要的这些值。通过选择矩形，并点击右上角的变换链接，我们得到了如下图所示的面板，包括我们所需要的x, y, width和height值。
这个AI中的变换面板可以用来获取选中矩形的位置和尺寸的值
你可能注意到了，上面的值并不是整数，所以我们需要手动修改。根据上面的信息，我们把viewBox的值改成 0 200 512 512。
因为新的viewBox的宽高比和SVG视窗的宽高比是一样的（都是正方形），viewBox内的内容将会扩大，并且只有被选中的区域会在视窗中显示。改变viewBox的值之后，结果如图：
新裁剪的SVG。只有我们指定使用viewBox属性的位置在视窗中是可见的。蓝色边框表示SVG的视窗。
在这一点上，有一个问题需要解决：
如果被裁剪区域（即viewBox）的宽高比 != SVG视窗的宽高比？
在这种情况下，将会有明显的溢出。明显的溢出，我指的不是超出SVG视窗边界的延伸，而是viewBox定义的相对于新用户坐标系统的溢出。下图作了相应的说明。
如果viewBox的宽高比和视窗的宽高比不同，SVG中的内容会溢出用户坐标系统，结果可能会是这样。
黑色边框代表新的用户坐标系，蓝色边框是SVG视窗。
上边右图中的黑色边框是viewBox定义的区域。根据viewBox在视窗内的默认行为，它会被居中并尽可能放大，来保证自身内容尽可能地包含在视窗（蓝色边框）中。
因为SVG画布从概念上来说，在所有方向都是无限延伸的，你可以在用户坐标系统边界之外绘制图形，内容会直接溢出移动，如上图所示。
如果你改变了SVG视窗的宽高比（SVG的width和height），来让它们适应viewBox的宽高比，你就不会看到溢出了，因为viewBox的缩放是适应视窗的，和前面的示例一样。
但是，在某些情况下，你可能不能或根本不想改变SVG的宽高比。比如说，如果你是使用SVG sprite作为一组图像来显示页面上图片的。在大多数情况下，图像都有一个固定的宽高比——而且你并不想改变改变图像的尺寸，就为了适应它里面的某一张小图的内容。或者可能你嵌入了一个图标系统，并希望所有的图标在同一个时间都保持相同的尺寸。
为了剪掉多余的东西（比如说，sprite上的部分其它图标，在视窗中显示），你可以使用
但是，还有一点要记住：确保
内容总结
以上是互联网集市为您收集整理的深入解析HTML5使用SVG图像时的viewBox属性用法_html5教程技巧全部内容，希望文章能够帮你解决深入解析HTML5使用SVG图像时的viewBox属性用法_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。