This is the 15th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)
  • Front end will know will learn | SVG see this article is enough (6)
  • Front end will know will learn | SVG see this article is enough (7)
  • Front end will know will learn | SVG see this article is enough (8)

preface

SVG supports a variety of mask effects, and with these features, you can produce a lot of cool effects in your projects. Divided into shear paths and masks, let’s take a look at 👇👇👇

  • Clipping pathcliping path
    • The graph is visible inside the clipping path, but not outside the clipping path.
  • maskmask
    • A mask is a container that defines a set of graphics and uses them as a translucent medium that can be used to combine foreground objects and backgrounds.
  • One important difference between the clipping path and other masks is that the clipping path is a 1-bit mask, which means that the objects covered by the clipping path are either completely transparent (visible, inside the clipping path) or completely opaque (invisible, outside the clipping path). Masks can specify the transparency of different positions.

shear

The clipping path is defined by the clipPath tag and referenced by the clip-path attribute. It is used to restrict the display of a graph. When the graph is outside the scope specified by clipPath, the outside scope will not be drawn. This graph can be a simple graph drawing, path, text, and so on to draw labels

Here is an example of using the clipPath tag:

<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(#cT
</svg>
Copy the code

In this example, a 100*100 square is partially obscured because we use clipPath to limit its drawing range. It can even be used with the text tag, so let’s change the code from the above example.

<svg width="200" height="200">
    <defs>
        <clipPath id="cTest">
        <text x="10" y="20" font-size="10">Use text to scope</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>
Copy the code

The clipPath tag also has a clipPathUnits attribute that defines the coordinate system for the element’s contents.

  • userSpaceOnUse(Default value) :x,y,widthandheightValues are the values of the current user’s coordinate system. In other words, these values are not scaled, they are absolute values.
  • objectBoundingBox:x,y,widthandheightValues are the user coordinate system and surrounding graph scale values for the graph of the current clipping path.

mask

The most impressive effect of the mask is shown as a gradient. If you want to fade an element out, you can do this using a mask effect.

Let’s briefly compare the difference between a clipping path and a mask:

<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)" />
Copy the code

In the example above, we will define a simple gradient effect and draw a rectangle to reference it. Finally, the rectangle is wrapped with the mask label. So the gradient effect between the picture and white is achieved. Masks are similar to clipping paths, except that they are translucent. Masks are usually used to combine two different objects for display, while clipping paths are used to clipping graphics.

Mask can also set the following properties

  • maskUnitsDefinition:maskLabel, the coordinate system of the graph that references the mask
  • **maskContentUnits ** : DefinitionmaskLabel the coordinate system of the neutron elements
  • x / yThis property sets the graph’sx / yThe axis coordinates, atmaskThe elementx / yThe default value is- 10%
  • width / heightThis attribute identifies a horizontal/vertical length in the user coordinate system, inmaskThe elementxThe default value is120%

The last

Thanks for reading this article about clipping paths and masks in SVG!

😀😀 Pay attention to me, don’t get lost! 😀 😀