Voir la région inverse de clip-path

Question

C'est un simple violon qui affiche une région circulaire à l'intérieur d'un rectangle https://jsfiddle.net/3v6yhf0m/

svg { 
 
    border: 3px dashed #999; 
 
} 
 
svg > rect:hover { 
 
    fill: green; 
 
}

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <clipPath id="myClip"> 
 
     <circle cx="30" cy="30" r="20"/> 
 
    </clipPath> 
 
    </defs> 
 

 
    <rect x="10" y="10" width="100" height="100" fill="blue" 
 
     clip-path="url(#myClip)"/> 
 
</svg>

Mais je veux voir la région du rectangle qui réside à l'extérieur du cercle à l'aide de clip-path https://jsfiddle.net/yhbeevya/

svg { 
 
    border: 3px dashed #999;background-color:blue;fill:blue; 
 
} 
 
svg > rect:hover { 
 
    fill: green; 
 
}

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <clipPath id="myClip"> 
 
     <circle cx="30" cy="30" r="20"/> 
 
    </clipPath> 
 
    </defs> 
 

 
    <rect x="10" y="10" width="100" height="100" fill="white" 
 
     clip-path="url(#myClip)"/> 
 
</svg>

S'il vous plaît partager vos idées

Answer 1

utiliser un masque à la place. Les parties noires du masque montrent l'arrière-plan, le blanc affiche la forme elle-même.

svg { 
 
    border: 3px dashed #999;background-color:blue;fill:blue; 
 
} 
 
svg > rect:hover { 
 
    fill: green; 
 
}

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <mask id="myMask"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <circle cx="30" cy="30" r="20" fill="black"/> 
 
    </mask> 
 
    </defs> 
 

 
    <rect x="10" y="10" width="100" height="100" fill="white" 
 
     mask="url(#myMask)"/> 
 
</svg>