Masks in SVG can also be called masks. Clip-path can be shortened to clipping. Both achieve similar effects, so their animation effects can be collectively referred to as mask animation.
Crop and mask
- In common
A mask or clipping definition is visible within the region, but not outside the region. Common ground is achieved by showing one part of the element and hiding the other.
- The difference between
Mask uses the object as an image, clipping uses the object as a path.
One important difference between a clipped path and a mask is that objects inside the clipped path are visible (the visible part is fully displayed and transparency cannot be set), while those outside the clipped path are invisible. A mask can specify transparency at different locations, using properties such as gradients, so that the parts outside the mask are not visible.
Here are two examples to compare the differences:
Clipping path instance
Use the clipPath element to represent the clipping path. To apply clipping paths, use the clip-path attribute to refer to the clipPath element.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
<defs>
<clipPath id="cut-off-rect">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
<clipPath id="cut-off-circle">
<circle cx="100" cy="260" r="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-rect)" />
<rect x="0" y="210" width="200" height="100" clip-path="url(#cut-off-circle)" />
</svg>
Copy the codebody{
width: 100%;
height: 100vh;
}
svg{
height: 500px;
}
Copy the code
In the code above, the clip-path attribute in circle defines a rect element rectangle with a width of 200 and a height of 100. In this way, only the portion of the circle covered by the shear path (the upper semicircle) is shown.
In the second figure, the square references a circle as a clipping path, and only the portion covered by the clipping path is shown. That is, the shear path is cut out.
ClipPath elements are usually placed inside defS elements.
The mask instance
Use the mask element to represent a mask. Masks can specify transparency at different locations, using attributes such as gradients.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<circle cx="100" cy="100" r="50" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" stroke="black" mask="url(#Mask)" />
</svg>
Copy the code
Above, we define a mask element with a circle filled with a transparent to white gradient. Apply a mask with a red rect, only the part of the mask is shown (gradient form)
Clipping animation example
Dynamically expand the display of pictures
Achieve the following effect:
This works by introducing an image in SVG and applying a clip-path to the image to show the image with the first small circle. Then increase the radius of the circle, gradually covering the entire image, so that the image is displayed.
Below is the initial image applied to the small circle clipping path.
<svg viewBox="0 0 700 400">
<title>Animated clip-path SVG</title>
<defs>
<clipPath id="cd-image-1">
<circle id="cd-circle-1" cx="80" cy="160" r="30"></circle>
</clipPath>
</defs>
<image height="400px" width="700px" clip-path="url(#cd-image-1)"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>
</svg>
Copy the codeThen, you dynamically change the radius of the circle element in the clipPath element, which is the value of r. Use CSS animation
.visible #cd-image-1 circle {
animation: visible-clippath 1s linear forwards;
}
@keyframes visible-clippath {
to {
r:1364; }}Copy the codeClick on the image to add the Visible class and animate it
document.querySelector('svg').addEventListener('click'.() = >{
document.querySelector('svg').classList.toggle("visible");
});
Copy the codeMask animation example
Text gradient animation
Achieve the following effect:
These 4 lines of text are created using a mask or gradient. Corresponding to:
- Monochrome (white) gradient, that is, there is no color change, but there is a change in transparency. Opacity gradient. Apply a mask to the element
- Polychromatic gradients, or color opacity gradients, are applied to elements using masks
- Text elements are filled with a gradient, and a opacity gradient is applied to the element through a mask
- Text elements are filled with gradients. Masks are not used
<svg id="object" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800" version="1.1">
<defs>
<linearGradient id="gradient-1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0)" x2="800" y2="0">
<stop offset="0" stop-color="#FFFFFF" stop-opacity="0" />
<stop offset="0.25" stop-color="#FFFFFF" stop-opacity="0.25" />
<stop offset="1" stop-color="#FFFFFF" stop-opacity="1" />
</linearGradient>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0)" x1="0" x2="100%" y1="0" y2="0">
<stop offset="0" stop-color="# 000000" stop-opacity="0.5" />
<stop offset="0.25" stop-color="#FF0000" stop-opacity="0.8" />
<stop offset="0.5" stop-color="#00ff00" stop-opacity="0.3" />
<stop offset="0.7" stop-color="#0000FF" stop-opacity="0.8" />
<stop offset="0.7" stop-color="#0816e4" />
<stop offset="1" stop-color="#FF5B99" stop-opacity="5" />
</linearGradient>
<mask id="mask-1" maskUnits="userSpaceOnUse">
<rect width="800" height="300" fill="url(#gradient-1)" />
</mask>
<mask id="mask" maskUnits="userSpaceOnUse">
<rect width="800" height="300" fill="url(#gradient)" />
</mask>
<text id="txt" x="400" y="150" font-family="Arial Black" font-size="60" text-anchor="middle">SVG AWESOME</text>
</defs>
<! Mask does not change the color of the original image but can be applied to the element.
<use xlink:href="#txt" fill="#FFDD00" mask="url(#mask-1)" />
<! -- Mask does not change the color of the graphic to apply transparency -->
<use xlink:href="#txt" y="120" fill="#FFDD00" mask="url(#mask)" />
<! You can use urls to reference elements such as gradients to make colors more colorful. Add the opacity of the mask -->
<use xlink:href="#txt" y="240" fill="url(#gradient)" mask="url(#mask-1)" />
<! Use urls to make the colors more colorful. -->
<use xlink:href="#txt" y="360" fill="url(#gradient)" />
</svg>
Copy the codeThe SVG looks like this:
Add the animation as follows, in the browser provided animation API requestAnimationFrame, change the Angle of the opacity gradient (rotation is centered on [0,0]); Change the X shift of the color opacity gradient;
window.onload = function () {
let i=0;
let gradi_motion= () = > {
//i = i % 90;
if(i>200){
i=0;
}
let gradient = document.getElementById("gradient");
let gradient1 = document.getElementById("gradient-1");
gradient1.setAttribute('gradientTransform'.`rotate(-${i}) `);
gradient.setAttribute('gradientTransform'.`translate(${i*4}`, 0));
i++;
requestAnimationFrame(gradi_motion);
}
window.requestAnimationFrame(gradi_motion);
};
Copy the codeSome tips on masks and gradients
- Using a mask does not change the color of a graphic element. The color is determined by the fill property.
- A mask applies transparency to an element. This is also the biggest difference from the shear path.
fillProperty color fill, you can use urls to reference other elements, such as gradient elements, to achieve color gradient. Such asfill="url(#gradient)"gradientTransformIs a gradient element (e.glinearGradientIs not available in CSS.gradientTransform="skewX(20) translate(-35, 0) rotate(0)".translateXNot available.
This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event