Заливка SVG, если существующий цвета заливки является определенным значением

Я использую этот код, чтобы изменить цвет заливки объекта SVG, и она работает:Заливка SVG, если существующий цвета заливки является определенным значением

$(function() { 
     $('g').mouseenter(function() { 
       $('path, rect, circle', this).attr('fill', '#00C8C8'); 
     }) 
    });

Но, я только хочу, чтобы изменить цвет заливки, если существующий цвет заливки имеет определенное значение. Таким образом, я думал, что-то вроде этого:

$(function() { 
     $('g').mouseenter(function() { 
      if($('circle', this).attr('fill') == '#DCDCFF'){ 
       $('circle', this).attr('fill', '#00C8C8'); 
      } 
     }) 
    });

EDIT: ... опять же, небольшая ошибка в jsfiddle (спасибо Robert)

Я создал страницу на jsfiddle здесь: http://jsfiddle.net/Wc9ZE/4/

чтобы показать то, что я пытаюсь понять, я также сделал цвета более четкими.

Проблема в том, что все прямоугольники желтеют, а затем краснеют, мне нужен только тот, который изначально был желтым, чтобы повернуть красным, а затем обратно на желтый. Маленький белый прямоугольник должен оставаться белым.

источник

2013-09-03 Family

Ваших скобок находятся в неправильном месте

if($('path, rect, circle', this).attr('fill') == '#DCDCFF') {

И jsfiddle кажется довольно странным, как и в первом случае круга, который вы используете Вэла, а не атр т.е.

if ($('circle', this).val('fill')

должен быть

if ($('circle', this).attr('fill')

не так ли?

И, наконец, если вы хотите только, чтобы работать на одном прямоугольнике, то вы должны дать, что Rect атрибута ID (ниже я предполагал, ID = «г»), а затем изменить код, как это ...

$(function() { 
     $('g').mouseenter(function() { 
      if ($('circle', this).attr('fill') == 'yellow') { 
       $('circle', this).attr('fill', 'pink'); 
      } 
      if ($('#r', this).attr('fill') == 'red') { 
       $('#r', this).attr('fill', 'yellow'); 
      } 
     }).mouseleave(function() { 
      if ($('#r', this).attr('fill') == 'yellow') { 
       $('#r', this).attr('fill', 'red'); 
      } 
      if ($('circle', this).attr('fill') == 'pink') { 
       $('circle', this).attr('fill', 'yellow'); 
      } 
     }); 
    });

источник

2013-09-03 11:25:19

Привет Роберт, спасибо за это. К сожалению, это все еще не работает должным образом. Я отредактировал мой вопрос. Благодарю. – Family

Упс! Ты прав. Я только что внес изменения в jsfiddle. Проблема в том, что все прямоугольники желтеют, а затем краснеют, я хочу, чтобы большая, изначально желтая, была красной, а затем назад. – Family

может быть, не то, что вы ищете, но и для удовольствия: Использование CSS3, вы можете изменить цвет при наведении курсора мыши, если конкретный атрибут заполнения устанавливается (примерить JS Bin):

<svg xmln="http://www.w3.org/2000/svg" width="40" height="90"> 
    <style type="text/css"> 
    rect:hover[fill="#DCDCFF"]{fill:#00C8C8} 
    </style> 
    <rect width="40" height="40" fill="#DCDCFF"/> 
    <rect y="50" width="40" height="40"/> 
</svg>

источник

2013-09-03 12:37:45

Привет, Томас. Это работает в Firefox, но я не могу заставить его работать в IE. – Family

Вы правы. Он даже не работает в Chrome, Chrome не любит селектор '*'. Тем не менее, он работает там с 'rect'. –

извините, если я звучу глупо. Я думаю, что я здесь не прав, и я извиняюсь, если так

но то, что я понимаю из вас, состоит в том, что только большой цвет прямоугольника должен измениться, но не меньше. это можно сделать очень легко, указав разный идентификатор на оба прямоугольника.

смотрите мой jsfiddle

пример код, как показано ниже

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
       $(function() { 
        $('g').mouseenter(function() { 
         if ($('circle', this).attr('fill') == 'yellow') { 
          $('circle', this).attr('fill', 'pink'); 
         } 
         if ($('rect', this).attr('fill') == 'red') { 
          $('#ttt33', this).attr('fill', 'yellow'); 
         } 
        }).mouseleave(function() { 
         if ($('rect', this).attr('fill') == 'yellow') { 
          $('#ttt33', this).attr('fill', 'red'); 
         } 
         if ($('circle', this).attr('fill') == 'pink') { 
          $('circle', this).attr('fill', 'yellow'); 
         } 
        }); 
       }); 
     </script> 
    </head> 
    <body> 
     <svg version="1.1" width="250px" height="200px" viewBox="0, 0, 350, 250" xmlns="http://www.w3.org/2000/svg"> 
      <g id="S1"> 
       <rect x="20" y="55" width="220" height="95" fill="red" stroke="black" stroke-width="1" id="ttt33" /> 
       <rect x="20" y="80" width="30" height="40" fill="#FFFFFF" stroke="black" stroke-width="1" id="ttt22" /> 
       <line x1="20" y1="100" x2="50" y2="100" stroke="black" stroke-width="2" /> 
       <line x1="50" y1="100" x2="70" y2="100" stroke="black" stroke-width="1" /> 
       <circle cx="105" cy="100" r="35" stroke="black" stroke-width="4" fill="yellow" /> 
      </g> 
     </svg> 
    </body> 
</html>

источник

2013-09-03 15:59:59 Dhaval

Спасибо, Дхавал. Кажется, это именно то, что мне нужно! Мне нужно настроить свой XML, но я могу это сделать. – Family

Поскольку SVG обрабатывает fill и stroke как в "стиле" атрибуты и через API "SVGPaint" (который не рекомендуется), самым безопасным способ получения значения атрибута представления составляет getComputedStyle, который работает против window, и элемент передается в:

document.defaultView.getComputedStyle(base_dom_element).fill

Или:

$(function() { 
     $('g').mouseenter(function() { 
      var dom_elem = $('circle',this).get(0); 
      if(document.defaultView.getComputedStyle(dom_elem).fill == '#dcdcff'){ 
       $('circle', this).css('fill', '#00C8C8'); 
      } 
     }) 
    });

Кроме того, в Chrome, по крайней мере, значение возвращается в виде нижнего регистра значения RGB HEX, так что вы можете изменить регистр значения перед сравнением, чтобы держать его кросс-браузер дружественных ,

ли вам первоначально попробовать просто:

$('circle', this).css('fill');

источник

2013-09-03 16:07:32 Anthony

IE возвращает шестнадцатеричное значение, Firefox возвращает значение rgba (r, g, b, a), поэтому довольно сложно сделать это в кросс-браузере. –

Заливка SVG, если существующий цвета заливки является определенным значением

ответ

Смежные вопросы