svg 蒙版(mask)和剪切(clipPath)学习

clipPath 剪切

clipPath 剪切路径范围内是显示的，否则是不显示的

<svg xmlns="http://www.w3.org/2000/svg">
    
    <defs>
        
        <clipPath id="moon">
            <circle cx='40' cy="40" r="20" fill="red" style="transform:translate(10px, 10px)"/>        
        clipPath>
    defs>
    
    <circle cx='40' cy="40" r="20" fill="yellow" style="clip-path:url(#moon);"/>
    
    
    <circle cx='100' cy="100" r="20" fill="green" style="transform:translate(10px, 10px)"/>
    <circle cx='100' cy="100" r="20" fill="red" />
svg>

mask 蒙版

mask 蒙版黑色的部分是不透明（不显示），白色是全透明（全部显示）

<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
    
    <defs>
    
        <mask id="moon">
            <circle cx='40' cy="40" r="20" fill="white"  />        
            <circle cx='40' cy="40" r="20" fill="black" style="transform:translate(10px, 10px)" />
        mask>
    defs>

    
    <circle cx='40' cy="40" r="20" fill="green" mask="url(#moon)" />

    
    <circle cx='100' cy="100" r="20" fill="white"  />        
    <circle cx='100' cy="100" r="20" fill="black" style="transform:translate(10px, 10px)" />
svg>