Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.03.2014, 22:37
Новичок на форуме
Отправить личное сообщение для putrsa Посмотреть профиль Найти все сообщения от putrsa
 
Регистрация: 21.03.2014
Сообщений: 8

Меню на SVG. Смена цвета при наведении мыши
есть файл меню, как сделать чтобы при закраске одного элемента желтым, все другие элементы закрашивались белым? Анимация через set и обработка события onmouseout пробовал - при быстром движении мыши по менюшке, не всегда успевает отрабатываться событие onmouseout и получаются закрашенными несколько элементов.
Код:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="150.81416"
   height="150.97495"
   id="svg2">
    <script type="text/javascript">
    // <![CDATA[
    function gonah(evt) 
    {
//     getElementById("r1").contentDocument.getElementById("romashka").contentDocument.getElementById("l1").contentDocument.setAttribute("fill", "white");
     var target = evt.target;
     target.setAttribute("fill","yellow");
    }
   // ]]>
  </script>
   
   <defs>
 <path id="lepestok" 
 d="
      M27,0
      A27,27 0 0 1 13.5, 23.38
      L 25, 43.3
      A12,12 0 1 0 43.3, 25
      A12,12 0 1 0 50, 0
      z
      " stroke="gray" fill="white" onmouseover="gonah(evt)">
  </path>
 
 <g id="romashka">
  <use xlink:href="#lepestok" id="l1"/>
  <use xlink:href="#lepestok" id="l2" transform="rotate(60)"/>
  <use xlink:href="#lepestok" id="l3" transform="rotate(120)"/>
  <use xlink:href="#lepestok" id="l4" transform="rotate(180)"/>
  <use xlink:href="#lepestok" id="l5" transform="rotate(240)"/>
  <use xlink:href="#lepestok" id="l6" transform="rotate(300)"/>
</g>   
 </defs> 
<circle cx="75" cy="75" r="27" stroke="red" fill="#ffFFaa"/>
<use id="r1" x="75" y="75" xlink:href="#romashka" />
</svg>
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2014, 00:25
Новичок на форуме
Отправить личное сообщение для putrsa Посмотреть профиль Найти все сообщения от putrsa
 
Регистрация: 21.03.2014
Сообщений: 8

Все, отбой, оказывается в SVG можно встраивать стили.
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2014, 02:24
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

var active, 
    gonah = function (evt) {
        var target = evt ? evt.target : window.event.srcElement;
        active && (active.setAttribute("fill", "white"));
        target.setAttribute("fill", "yellow");
        active = target;
      };
Ответить с цитированием
  #4 (permalink)  
Старый 22.03.2014, 11:22
Новичок на форуме
Отправить личное сообщение для putrsa Посмотреть профиль Найти все сообщения от putrsa
 
Регистрация: 21.03.2014
Сообщений: 8

Тоже работает, спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Расшрение DIV при наведении мыши. OD_RS Элементы интерфейса 1 27.05.2013 21:49
Смена картинок при наведении utb jQuery 0 06.04.2012 08:58
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
Многократный запуск скрипта при наведении мыши AcidCrash Элементы интерфейса 7 08.07.2011 12:02
Маленькая картинка при наведении мыши Hagrael Events/DOM/Window 6 07.07.2010 16:20