Здравствуйте!
Подскажите пожалуйста. Проблема следующая, при наведении курсора на ссылку появляется изображение, но не полностью, часть изображения почему-то обрезана. Ссылки созданы на траектории окружности при помощью SVG. При наведении на ссылку pushkin должен появлятся круг, но появляется только 1/4 его часть.
http://hkar.ru/FXMi
При наведении курсора на две другие ссылки должна появлятся оружность, но она тоже появляется не целиком.
http://hkar.ru/FXMj
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
a object data {
visibility: hidden;
}
a:hover object data {
visibility: visible;
}
</style>
<object data="link0.svg" type="image/svg+xml" width="190" height="190" style="position: absolute; z-index: 110!important; ; top: 420px; left: 575px;" >
</object>
<object data="link.svg" type="image/svg+xml" width="330" height="330" style="position: absolute; opacity: 1; z-index: 100!important; ; top: 300px; left: 460px;" >
</object>
</body>
</html>
Превая ссылка "link0.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="190" height="190">
<title>Текст вдоль траектории</title>
<desc>
Чтобы линии были не видны, элементы path
следует заключить в контейнер defs
</desc>
<defs>
<path id="link0" d="M10,30 L65,30"
stroke="grey" fill="none" />
</defs>
<style>
a image {
visibility: hidden;
}
a:hover image {
visibility: visible;
}
</style>
<a xlink:href="http://http://pushkin.niv.ru" xlink:show="new">
<text font-size="17" font-family="arial" fill=" #0000FF">
<textPath xlink:href="#link0" startOffset="0%">
pushkin.niv.ru
</textPath>
</text>
<image xlink:href="images/okr1.png" height="190" width="190" x="-65" y="-67"/>
</a>
</svg>
Две другие ссылки "link0.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="330" height="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;
}
</style>
<a xlink:href="http://www.tolstoy.ru" xlink:show="new">
<text font-size="16" font-family="arial" fill=" #0000FF">
<textPath xlink:href="#link1" startOffset="0%">
tolstoy.ru
</textPath>
</text>
<image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15"/>
</a>
<a xlink:href="http://www.lermontov.niv.ru" xlink:show="new">
<text font-size="16" font-family="arial" fill=" #0000FF">
<textPath xlink:href="#link1" startOffset="19%">
lermontov.niv.ru
</textPath>
</text>
<image xlink:href="images/okr2.png" height="330" width="330" x="-18" y="-15"/>
</a>
</svg>
Также все файлы разместил здесь:
https://yadi.sk/d/NMvbqOdcmjz5F
