картинка перекрывает ссылку
 

Здравствуйте! Подскажите пожалуйста.
При наведении курсора на ссылку появляется картинка, но она перекрывает другие ссылки.
Как я понял в svg задание значения при помощи z-index не действует, а всё зависит от расположения, и чем выше элемент в коде тем тем больше его "z-index".http://codepen.io/anon/pen/YwQoXy
Как сделать так чтобы остальные ссылки при появлении картинки (либо при переводе курсора с одной ссылки на другую) не перекрывались?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="330" height="330" viewBox="-18 -15 330 330">

  <path id="link1" d="M20,150 A130,130 0 1,1 20,150.01" stroke="grey" fill="none" />

  <style>
    a image {visibility: hidden;}
    a:hover image {visibility: visible;}
    a:hover text {text-decoration: underline;}
  </style>

  <a xlink:href="http://www.tolstoy.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="0%">
        tolstoy.ru
      </textPath>
    </text>
  </a>
  
    <a xlink:href="http://www.ngogol.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="20%">
        ngogol.ru
      </textPath>
    </text>
  </a>
  
    <a xlink:href="http://www.antonchehov.ru" xlink:show="new">
    <image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15" />
    <text font-size="16" font-family="arial" fill=" #0000FF">
      <textPath xlink:href="#link1" startOffset="40%">
      antonchehov.ru
      </textPath>
    </text>
  </a>
</svg>

Благодарю за помощь!