Javascript-форум - Позиционирование картинки

Добрый день, друзья!
Помогите пожалуйста разобраться.
При наведении курсора на ссылку появляется изображение, но не в том месте где нужно. При позиционировании картинки через "x" и "y" часть изображения почему-то обрезается.

<image xlink:href="images/okr1.jpg" width="100%" height="100%" x="200" y="100"/>

Хотелось чтобы картинка целиком появлялаяь снизу под окружностью.
Ниже весь размещён код:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
   </head>
 <body>
 <object data="link.svg" type="image/svg+xml" width="400" height="450" >
</object>
</body>
</html>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
    <title></title>
    <desc></desc>

    <style>
        a image {
            visibility: hidden;
        }

        a:hover image {
            visibility: visible;
        }
    </style>

    <path id="mypath2" d="M50,150 A130, 130 0 1,1 50,150.01" stroke="grey" fill="none"/>

    <a class="okrug" xlink:href="http://www.ya.ru" xlink:show="new">
        <text font-size="17" font-family="arial" fill=" #0000FF">
            <textPath xlink:href="#mypath2" startOffset="35%">ya.ru</textPath>
        </text>
        <image xlink:href="images/okr1.jpg" width="100%" height="100%" x="200" y="100"/>
    </a>
</svg>

Заранее благодарю за помощь!