1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<defs>
  <!-- le dégradé -->
  <linearGradient
   id="rougeBleu"
   x1="0%" y1="0%" x2="100%" y2="0%">	
     <stop offset="0%"   stop-color="crimson"/>
     <stop offset="100%" stop-color="deepSkyBlue"/>
  </linearGradient>
</defs>
 
<!-- le masque -->
<mask id="leMasque" maskContentUnits="objectBoundingBox">
  
  <rect width="100%" height="100%" fill="white"/>
  <path d="M0,0.5
           a 0.5 0.5 0 0 0 0.5 -0.5
           a 0.5 0.5 0 0 0 0.5 0.5
           a 0.5 0.5 0 0 0 -0.5 0.5
           a 0.5 0.5 0 0 0 -0.5 -0.5"
        fill="black"/>

</mask>
					 

<!-- le rectangle affichant le dégradé -->
<rect
    width="128" height="128"
    fill="url(#rougeBleu)"/>

<!-- la forme trouée -->
<circle
    cx="64" cy="64" r="40"
    fill="white" mask="url(#leMasque)"/>