Добрый день, друзья!
Помогите пожалуйста разобраться.
При наведении курсора на ссылку появляется изображение, но не в том месте где нужно. При позиционировании картинки через "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>
Заранее благодарю за помощь!
