عنصر <clipPath> لـ SVG

<svg　height="450"　width="450">
　　<defs>
　　　　　　<clipPath　id="clip">
　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25"　cy="25"　r="30"
　　　　　　　　　　style="fill:　#0000ff;　clip-path:　url(#clip);　"　/>
</svg>

<style>
svg{width:40%;height:30%}
@keyframes　openYourHeart　{from　{r:　0}　to　{r:　60px}}
#myClip　circle　{
　　animation:　openYourHeart　15s　infinite;
}
</style>
<svg　viewBox="0　0　100　100">
　　<clipPath　id="myClip">
　　　　<!--
　　　　　　كل شيء خارج الدائرة سيتم قطعه، لذا لا يظهر.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35"></circle>
　　</clipPath>
　
　　<!-- كشكل مرجعي (باللغة الإنجليزية: for reference) قلب أسود -->
　　<path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"></path>
　
　　<!--
　　　　فقط الجزء الأحمر من الدائرة الموجود داخل القلب الأسود هو المرئي؛
　　　　كلما زاد حجم الدائرة، ستصبح تدريجياً قلب أحمر.
　　-->
　　<use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>