SVG:剪切,蒙版和过滤器 中文字幕

课程信息
英文名SVG: Clipping, Masking, and Filters
课程来源Lynda.com
讲师Morten Rand-Hendriksen
课程ID713398
课程时长2.3小时
下载所需积分50
所属类别

使用SVG做更多事情

许多Web设计人员和开发人员利用SVG的强大功能:可缩放矢量图形

但很少有人意识到SVG还可以让你创建基于代码的视觉效果 - 这种图形过去只能在像Photoshop这样的程序中使用

深入了解可缩放矢量图形格式中可用的高级视觉功能,包括削波,遮罩和滤镜,在本课程中使用Morten Rand-Hendriksen

了解如何使用clipPath,蒙版和各种滤镜元素来创建剪切蒙版,Alpha图层以及模糊和锐化,颜色校正,拉伸和高级合成等效果

Morten包括SVG中所有可用过滤器的详细分类,以及显示基于代码的视觉效果的优点的示例

主题包括:

剪辑和屏蔽如何在SVG中工作

面具坐标系

过滤元件

结合过滤器

过滤原语

使用SVG过滤器

- [Morten] SVG是可缩放矢量图形的缩写,允许我们在标准间隔的Web代码中创建高级图形,并指示浏览器如何显示这些图形,但并非全部。

SVG有很多鲜为人知的功能,我们可以使用它们来嵌入浏览器的图形处理能力,以产生基于代码的视觉效果,可以使用CSS和JavaScript进行操作和动画制作。

在本课程中,我将向您介绍其中的三个工具:clipPath,mask和filter。

ClipPath将任何SVG形状转换为底层图形的剪切路径,无论是图像还是其他SVG形状。

Mask使用alpha图层来切换底层图形的不透明度,而滤镜,well滤镜可以执行各种操作,从模糊和锐化到颜色校正,拉伸和高级合成。

可以这样想,使用clipPath,mask和过滤SVG元素,你认为需要一个图形编辑应用程序,比如Photoshop或Sketch创建的大部分内容实际上可以在浏览器中以代码形式完成, 太棒了

了解这些先进的SVG功能为图形显示开辟了新的机会,我在这里向您展示如何正确地做到这一点,所以让我们开始吧。

中文课程网 提供全网最全,中文翻译质量最高的国外课程视频资源(Lynda / Pluralsight)

请先登陆 如果还没有账号,请先注册