Добрый день! Подскажите пожалуйста.
Есть ссылка размещённая на окружности при наведении на неё курсора должна появлятся картинка, но она не появляется. При наведении на обычную ссылку всё работает как надо. Файлы во вложении
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen">
<meta charset="utf-8">
<title></title>
</head>
<body>
<object data="link.svg" type="image/svg+xml" width="400" height="450" >
</object>
<!--обычная ссылка-->
<a class="okrug" href="http://www.ya.ru" xlink:show="new">ya.ru<span><img src="images/okr1.jpg" style="position: absolute; " />
</span>
</a>
</body>
</html>
Style.css
.okrug span{
position: absolute;
left: 500px;
z-index: 100!important;
visibility: hidden;
}
.okrug:hover span{
visibility: visible;
}
SVG
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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>
<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<span><img src="images/okr1.jpg" style="position: absolute;
top: 348px;
left: 511px;"
/></span>
</textPath>
</text>
</a>
</svg>