Маски в SVG

Маски в SVG

Здесь показаны три SVG-файла, в которорых применяются маски. Под каждым изображением приводится соответствующий SVG-код
<defs>
  <radialGradient id="mygradient"
          cx="30%" cy="30%">
    <stop offset="60%" 
          stop-color="white"
          stop-opacity="1"/>
    <stop offset="100%"
          stop-color="white"
          stop-opacity="0.1"/>
  </radialGradient>
  <mask id="mymask">
     <circle cx="140" cy="120" r="100" fill="url(#mygradient)"/>
  </mask>
</defs>
<image xlink:href="p-0105.jpg" mask="url(#mymask)"
 x="0" y="0" width="320px" height="256px" />
<defs>
  <radialGradient id="mygradient"
    cx="50%" cy="50%">
    <stop offset="80%" 
          stop-color="white"
          stop-opacity="1"/>
    <stop offset="100%"
          stop-color="white"
          stop-opacity="0.2"/>
  </radialGradient>

  <mask id="mymask">
     <circle cx="110" cy="120" r="90" fill="url(#mygradient)"/>
     <circle cx="220" cy="120" r="90" fill="url(#mygradient)"/>
  </mask>
</defs>
<image xlink:href="p-0068.jpg" mask="url(#mymask)"
 x="0" y="0" width="320px" height="256px" />
<defs>
  <text id="mytext" x="45" y="60"
        style="font-family:Arial">
    <tspan>
        Во глубине сибирских руд
    </tspan>
    <tspan x="45" dy="20">
        Храните гордое терпенье.
    </tspan>
    <tspan x="45" dy="20">
        Не пропадет ваш скорбный труд
    </tspan>
    <tspan x="45" dy="20">
        И дум высокое стремленье.
    </tspan>
    <tspan x="45" dx="100" dy="20">
        А.С. Пушкин
    </tspan>
  </text>
  <radialGradient id="mygradient"
    fx="30%" fy="30%" >
    <stop offset="20%" stop-color="white" stop-opacity="0.8"/>
    <stop offset="80%" stop-color="#0000ff" stop-opacity="0.4"/>
    <stop offset="90%" stop-color="#000080" stop-opacity="0.6"/>
  </radialGradient>
  <mask id="mymask1">
    <!-- Прозрачный прямоугольник с непрозрачным кругом для лупы внутри -->
    <rect x="0" y="0" width="300" height="300" fill="white"/>
    <circle cx="130" cy="100" r="50" fill="black"/>   
  </mask>

  <mask id="mymask2">
    <!-- Прозрачный круг (лупа) -->
    <circle id="mycircle" cx="130" cy="100" r="50" fill="white" />   
  </mask>
</defs>
<!-- Выводим текст, удалив все, что в круге -->
<use xlink:href="#mytext" mask="url(#mymask1)" style="font-size:12px"/>
<!-- Накладываем текст большего размера, расположенный в круге --> 
<use xlink:href="#mytext" mask="url(#mymask2)" style="font-size:18px"/>
<!-- Накладываем контур круга -->
<circle cx="130" cy="100" r="50"  fill= "url(#mygradient)"
           stroke="red" stroke-width="4"/>