SVG 剪裁与蒙版（clipPath & mask）

简介

参考MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

The SVG element defines a clipping path. A clipping path is used/referenced using the clip-path property.

The clipping path restricts the region to which paint can be applied. Conceptually, any parts of the drawing that lie outside of the region bounded by the currently active clipping path are not drawn.

A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element’s inherent geometry. The bounding box of a clipped element (meaning, an element which references a element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped.

By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive “click” events outside the smaller radius.

SVG的元素定义了一个裁剪的路径。一个裁剪的路径通过clip-path属性来使用或引用。

一个剪辑的路径限制了绘制可以被应用的区域。从概念上来看，任何在当前激活裁剪区域边界之外的部分都不会被绘制。

一个裁剪区域对于引用的元素来说，在概念上等价于一个自定义的视口。因此，它影响了元素的渲染，而不是元素固有的几何区域。剪裁掉的元素边界（意味着，一个通过clip-path属性引用的元素，或者该元素的子元素）必须保留的和没裁剪过一样。

默认情况下，事件指针不能被分派到图形剪裁掉(不可见)的区域。举个例子，一个半径为10的圆，被夹在一个半径为5的圆上，不会在半径较小的半径范围内接收”点击”事件。

例子

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" >
    <clipPath id="rectClip">
        <rect x="0" y="10" width="100" height="35" />
        <rect x="0" y="55" width="100" height="35" />
    clipPath>
    <clipPath id="textClip">
        <text x="130" y="30" font-size="20px">跟我一起学SVGtext>
    clipPath>
    <circle cx="50" cy="50" r="50" clip-path="url(#rectClip)" />
    <g clip-path="url(#textClip)" >
        <rect x="120" y="10" width="150" height="80" fill="rgb(255,0,0)" />
        <circle cx="150" cy="50" r="30" />
        <circle cx="200" cy="50" r="30" />
    g>
    <style>
        svg {
            border: 3px dashed #999;
        }
        svg > circle:hover {
            fill: green;
        }
        svg > g > rect:hover {
            fill: blue;
        }
        svg > g > circle:hover {
            fill: blue;
        }
        svg > g:hover {
            fill: yellow;
        }
    style>
svg>

注意

• 由于事件冒泡的处理方式，例如将鼠标放在上图的上，则先触发的hover事件，然后才触发的hover事件。
• 另外，被裁剪掉的部分是不会响应事件的。

简介

蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。

注意：

• 理论上蒙版仅支持黑或白和透明度，但实际上所有颜色均是可用的。
• 当颜色为纯白色时，蒙版透明度控制其遮罩层透明度；当颜色为纯黑色时，无论透明度是多少均是透明的。

属性

• maskUnits = “userSpaceOnUse | objectBoundingBox(默认值)”
  定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统：userSpaceOnUse 使用引用该蒙板的元素的用户坐标系，objectBoundingBox 使用相对于引用蒙板的元素的包围盒的相对值。
• maskContentUnits = “userSpaceOnUse(默认值) | objectBoundingBox”
  定义了mask元素中子元素的坐标系统。
  我的理解是：mask中的元素坐标会先经过maskContentUnits做一次变换，然后经过maskUnits的时候再做一次变换。userSpaceOnUse 是绝对坐标，objectBoundingBox是相对坐标。默认的情况下，maskUnits 使用相对坐标对坐标系进行变换，而其内部的元素只要使用该坐标系来定位就可以了，也就是说不用再进行一次变换了，所以maskContentUnits 被指定为userSpaceOnUse。
• x, y, width, height
  定义了蒙板的位置和大小，在默认的objectBoundingBox坐标下，默认值分别为-10%,-10%,120%,120%。

例子

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" >

    <mask id="maskWhiteBlack" x="0" y="0" width="200" height="100">
        <rect x="0" y="0" width="40" height="100" fill="white"/>
        <rect x="40" y="0" width="40" height="100" fill="white" opacity=".5"/>
        <rect x="80" y="0" width="40" height="100" fill="red" opacity=".5"/>
        <rect x="120" y="0" width="40" height="100" fill="black" opacity=".5"/>
        <rect x="160" y="0" width="40" height="100" fill="black"/>
    mask>
    <mask id="maskColorful" x="0" y="0" width="200" height="100" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" >
        <rect x="0" y="0" width="40" height="100" fill="rgba(85,85,85,1)"/>
        <rect x="40" y="0" width="40" height="100" fill="rgba(255,0,0,1)"/>
        <rect x="80" y="0" width="40" height="100" fill="rgba(255,255,255,0.5)"/>
        <rect x="120" y="0" width="40" height="100" fill="rgba(255,0,0,0.5)"/>
        <rect x="160" y="0" width="40" height="100" fill="rgba(85,85,85,0.5)"/>
    mask>

    <path d="M0 0 v10 M40 0 v10 M80 0 v10 M120 0 v10 M160 0 v10 M200 0 v10" stroke-width="4" stroke="red" />

    <text id="Text" x="100" y="30" font-size="26" font-weight="bold" text-anchor="middle" fill="blue" >White && Blacktext>

    <text id="Text" x="100" y="60" font-size="26" font-weight="bold" text-anchor="middle" fill="blue" mask="url(#maskWhiteBlack)">White && Blacktext>

    <text id="Text" x="100" y="90" font-size="26" font-weight="bold" text-anchor="middle" fill="blue" mask="url(#maskColorful)">Color && Colortext>
svg>

与的区别

裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。