• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

【前端SVG】剪切路径和遮罩

武飞扬头像
juejin
帮助228

前言

SVG支持多种遮罩效果,使用这些特性,你可以在你的项目中生产出很多很酷炫的效果。分为剪切路径和遮罩,让我们一起来看看吧.

  • 剪切路径cliping path
    • 在剪切路径内图形是可见的,在剪切路径之外的图形是不可见的。
  • 遮罩mask
    • 遮罩是一种容器,它一定了一组图形并将它们作为半透明的媒介,可以用来组合前景对象和背景。
  • 裁剪路径和其他的蒙板一个重要的区别就是:裁剪路径是1位蒙板,也就是说裁剪路径覆盖的对象要么就是全透明(可见的,位于裁剪路径内部),要么就是全不透明(不可见,位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

剪切

剪切路径使用clipPath标签定义,后使用clip-path属性引用,它用于限制一个图形的显示。当图形超出clipPath规定的范围,那么超出的范围将不会绘制出来。这个图形可以是使用简单的图形绘画、pathtext等图形绘制标签

下面是一个clipPath标签使用的例子:

<svg width="200" height="200">
    <defs>
        <clipPath id="cTest">
          <rect x="10" y="10" width="100" height="50" />
        </clipPath>
      </defs>
      <rect x="10" y="10" width="100" height="100" fill="red" clip-path="url(#cTest)"></rect>
</svg>

51.png

这个例子,将一个100*100的正方形遮挡了一半,因为我们使用了clipPath限制了它的绘制范围。它甚至还可以用于text标签,我们把上面例子的代码改改。

<svg width="200" height="200">
    <defs>
        <clipPath id="cTest">
        <text x="10" y="20" font-size="10">用文本定范围</text></clipPath>
    </defs>
    <g clip-path="url(#cTest)">
        <rect x="10" y="10" width="50" height="50" fill="red" />
        <rect x="45" y="10" width="50" height="50" fill="green"/>
    </g>
</svg>

52.png

clipPath标签还有一个clipPathUnits属性,用于定义用于元素内容的坐标系。

  • userSpaceOnUse(默认值):xywidthheight表示的值都是当前用户坐标系统的值。也就是说,这些值没有缩放,都是绝对值。
  • objectBoundingBoxxywidthheight表示的值都是当前剪切路径的图形的用户坐标系和包围图形比例值。

遮罩

遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出,你可以利用遮罩效果实现这一点。

我们简单对比下剪切路径和遮罩的区别:

<defs>
    <linearGradient id="Gradient">
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="1" stop-color="white" stop-opacity="1" />
      </linearGradient>
      <clipPath id="cp">
        <rect x="60" y="0" width="35" height="35" />
      </clipPath>
      <mask id="Mask">
        <rect x="0" y="0" width="50" height="50" fill="url(#Gradient)"  />
      </mask>
</defs>
<image xlink:href="./img/1.jpg" x="0" y="0" height="50px" width="50px" mask="url(#Mask)" />
<image xlink:href="./img/1.jpg" x="60" y="0" height="50px" width="50px" clip-path="url(#cp)" />

53.png

以上例子中,我们将定义了一个简单的渐变效果,并绘制了一个矩形引用了它。最后用mask标签包裹了这个矩形。所以实现了图片与白色之间的渐变效果。遮罩与剪切路径类似,只不过是半透明的。遮罩通常用于将两个不同的对象进行组合显示,而剪切路径用于剪切图形。

mask还可以设置以下属性

  • maskUnits: 定义mask标签中的坐标系统,引用该遮罩的图形的坐标系
  • **maskContentUnits **: 定义mask标签中子元素的坐标系统
  • x / y 该属性分别设置图形的 x / y 轴坐标,在mask元素中 x / y 默认值为-10%
  • width / height 该属性在用户坐标系统中标识了一个水平 / 垂直长度,在mask元素中x默认值为120%

最后

本篇文章讲述了在SVG中剪切路径与遮罩相关知识,感谢你的阅读!

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanekjk
系列文章
更多 icon
同类精品
更多 icon
继续加载