Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не отображается часть изображения (https://javascript.ru/forum/misc/60579-ne-otobrazhaetsya-chast-izobrazheniya.html)

Ваня98 08.01.2016 15:16

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

laimas 08.01.2016 19:00

Почитайте, http://habrahabr.ru/company/devexpress/blog/269331/

Ваня98 09.01.2016 11:20

laimas, спасибо! Задание нужных параметров для viewBox всё решило!


Часовой пояс GMT +3, время: 18:22.