如何在背景引导模态窗口上制作透明圆圈？

Question

请告诉我如何在模态窗口的背景上制作透明圆圈。我想创造这种效果。当我在黑色背景上打开模态窗口时，移动透明圆圈，让您可以看到页面而不会变暗。作为一盏灯的光的作用在黑背景。我创建了在页面上移动的SVG圈子，但是如何做到这一点，他们做了背景模式Windows是透明的，没有找到。这是一个测试示例：test example 也许我一般都做错了，请发送如何最佳地做到这一点？ 为了这样的效果：

我的SVG

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="550px" height="550px" viewBox="0 0 550 550" xml:space="preserve">
  <defs>
  <mask id="mask5">
  <circle cx="153.58" cy="250" r="100" fill="url(#grad5)">
  <animate id="c1" attributeName="cx" begin="0s;c2.end" from="0" to="250" dur="3s"></animate>
  <animate id="c2" attributeName="cx" begin="c1.end" from="250" to="0" dur="3s"></animate>
  </circle>
  <circle cx="346.42" cy="250" r="100" fill="url(#grad5)">
  <animate id="c3" attributeName="cx" begin="0s;c4.end" from="500" to="250" dur="3s"></animate>
  <animate id="c4" attributeName="cx" begin="c3.end" from="250" to="500" dur="3s"></animate>
  </circle>
  </mask>
  <radialGradient id="grad5" cx="50%" cy="50%" fx="50%" fy="50%">
  <stop offset="40%" stop-color="white"></stop>
  <stop offset="100%" stop-color="black"></stop>
  </radialGradient>
  </defs>
  <image xlink:href="http://blog.studio.gd/files/admin_post/img/6.jpg?1375351354" mask="url(#mask5)" width="500" height="500" x="0" y="0"></image>
  </svg>

模态窗口

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          Test window
        </div>
      </div>
    </div>