Ссылка на окружности и картинка
Вложений: 2
Добрый день! Подскажите пожалуйста.
Есть ссылка размещённая на окружности при наведении на неё курсора должна появлятся картинка, но она не появляется. При наведении на обычную ссылку всё работает как надо. Файлы во вложении <!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> |
Изображение в SVG вставляется тегом <image xlink:href="" x="0" y="0" height="" width=""/>
http://codepen.io/CreativeSeo33/pen/XXRPmN Можете почитать про Svg здесь |
Спасибо!
|
Часовой пояс GMT +3, время: 06:44. |