A <clipPath> is pure geometry: content inside its shapes shows, everything else is cut away with a hard edge (clip-rule picks the fill rule). A <mask> is a grayscale stencil: by default each pixel's luminance becomes the content's opacity, so white shows, black hides and gray fades; mask-type="alpha" uses the mask's alpha instead. Apply them with clip-path="url(#id)" and mask="url(#id)". The CSS clip-path property also accepts shapes such as circle(40%) and polygon(...), and works on HTML elements too.
<svg width="600" height="100">
<symbol id="star" viewBox="0 0 24 24">
<path d="M12 2.6 14.5 9.2 21.5 9.5 16 13.9 17.9 20.7 12 16.8 6.1 20.7 8 13.9 2.5 9.5 9.5
9.2Z"/>
</symbol>
<defs><g id="five"><use href="#star" width="40" height="40"/><use href="#star" x="42"
width="40" height="40"/><use href="#star" x="84" width="40" height="40"/><use href="#star"
x="126" width="40" height="40"/><use href="#star" x="168" width="40" height="40"/></g>
</defs>
<clipPath id="rating"><rect width="192" height="40"/></clipPath> <!-- 168 + 0.6 * 40 -->
<use href="#five" x="10" y="30" fill="#e0d8c8"/>
<use href="#five" x="10" y="30" fill="#e09a10" clip-path="url(#rating)"/>
<linearGradient id="fade" x2="0" y2="1"><stop offset="0.3" stop-color="#fff"/>
<stop offset="1" stop-color="#000"/></linearGradient>
<mask id="m"><rect x="300" width="290" height="100" fill="url(#fade)"/></mask>
<g mask="url(#m)"><rect x="300" width="290" height="100" fill="#1f5f8b"/>
<text x="445" y="45" text-anchor="middle" fill="#fff" style="font:bold 24px Georgia">
The Quiet Harbor</text></g>
</svg>
The clip rectangle covers four stars (168 units) plus 60% of the fifth star's 40-unit box, measured in the user space of the element it clips: the 4.6 rating that <use> promised. The mask's white-to-black gradient fades the whole cover, text included, into the page. Masks cost more than clips because every pixel is multiplied, so prefer a clip when the edge can be hard.