Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.03.2016, 17:19
Интересующийся
Отправить личное сообщение для Ваня98 Посмотреть профиль Найти все сообщения от Ваня98
 
Регистрация: 01.11.2014
Сообщений: 19

неверно отображается фоновое изображение
Здравствуйте, товарищи!
Есть две ссылки каждая размещена в отдельном svg. При наведении на одну ссылку (pushkin) должно появляется фоновое изображение в виде круга синего цвета,
при наведении на другую (lermontov.info) появляется фоновое изображение уже в виде окружности зелёного цвета. На деле правильно отображается лишь изображение при наведении на ссылку lermontov.info, а при наведении на ссылку pushkin вместо синего круга отображается окружность зелёного цвета. Подскажите пожалуйста как это исправить.

<!DOCTYPE html>
<html>
<head></head>
<body>

<svg  type="image/svg+xml" width="190" height="190" style="position: absolute; opacity: 1; z-index: 110!important; ; top: 155px; left: 118px;"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" width="190" height="190" viewBox="-59 -67 190 190" >
   <style> 
    a:hover {background-image: url('okr1.png'); background-size: cover;}
   </style>      
<path id="link0" d="M10,30 L65,30" stroke="grey" fill="none" />
<a xlink:href="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>
</a>
</svg >
			
            
<svg type="image/svg+xml" width="330" height="330" style="position: absolute; opacity: 1; z-index: 100!important; ; top: 85px; left: 48.5px; "
   xmlns="http://www.w3.org/2000/svg" version="1.1"
   xmlns:xlink="http://www.w3.org/1999/xlink" >
   <style> 
      svg:hover {background-image: url('okr2.png'); background-size: cover;}
   </style>
	<path id="link1" d="M20,150 A130,130 0 1,1 280,150" stroke="transparent" fill="none" /> 
<a xlink:href="http://lermontov.info" xlink:show="new">
<text font-size="17" font-family="arial" fill=" #0000FF">
<textPath xlink:href="#link1" startOffset="18%">
lermontov.info
</textPath>
</text>
</a>
</svg >
	
</body>
</html>


Правильное отображение картинки при наведении на ссылку lermontov.info.
[IMG]
[/IMG]

Неправильное отображение картинки при наведении на ссылку pushkin . Вместо синего круга, зелёная окружность.
[IMG][/IMG]
Вложения:
Тип файла: zip изобр-е.zip (4.4 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2016, 17:42
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Ваня98,
Попробуйте такой вариант для первого svg
строка 06
<svg class="pushkin" type="image/svg+xml" width="190" height="190" style="position: absolute; opacity: 1; z-index: 110!important; ; top: 155px; left: 118px;"


строка 10

.pushkin:hover {background-image: url('okr1.png'); background-size:
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исчезающее фоновое изображение! Makkssimka (X)HTML/CSS 0 25.11.2014 16:16
Фоновое изображение, padding и масштабирование. velther (X)HTML/CSS 9 25.11.2011 00:51
Фоновое изображение формы genek45533 Элементы интерфейса 1 07.10.2011 21:04
Как фоновое изображение дочерних объектов... DDSSDD Элементы интерфейса 4 11.04.2011 18:52
фоновое изображение через fileUpload i8th Events/DOM/Window 4 25.02.2010 11:53