Выберите Svg Path по цвету заливки с помощью jquery

Я бы не хотел отображать все белые заливочные пути в моем svg.Выберите Svg Path по цвету заливки с помощью jquery

Представьте себе СВГ с этой структурой:

<svg> 
    <path class="pathok"fill="rgb(29,233, 182)"/> 
    <path class="pathok" fill="rgb(255, 255, 255)" /> 
    <path class="pathok" fill="rgb(255, 255, 255)" /> 
    <path class="pathok" fill="rgb(255, 255, 255)"/> 
</svg>

Я попытался с этим, но не работает:

<script> 
    if ($("path").attr("fill") == ("rgb(255, 255, 255)")) { 
     $(this).css("display","none") 
    } 
</script>

В общем, как я мог выбрать теги значением его атрибута ?

источник

2017-02-16 vlk

Ваш селектор получает все пути, а не индивидуальный путь.

Попробуйте это:

$(document).ready(function(){ 
    var $paths = $('path'); // Get all paths 
    for (var i=0;i<$paths.length;i++){ // Iterate through each one 
     var $path =$($paths[i]); // This gets a single path 
     if ($path.attr("fill") == ("rgb(255, 255, 255)")) { 
      $path.css("display","none"); 
     } 
    } 
});

источник

2017-02-17 00:10:12 Chris

это работает. Я очень начинаю с js. Не могли бы вы объяснить мне использование переменной i? Спасибо. – vlk

Да, конечно. 'i' используется как« индекс »или« счетчик ». Нам нужен счетчик, чтобы отслеживать, где мы находимся в цикле 'for ...', потому что мы используем счетчик для доступа к текущему элементу объекта '$ paths' (т. Е. $ Paths [i]). Каждый раз, когда цикл for повторяется (циклы вокруг), 'i' увеличивается на 1 (это делается с помощью' i ++ '. Надеюсь, что это поможет. – Chris

Зачем вообще перебирать, когда вы можете просто выбрать те, которые хотите? –

Вы можете просто выбрать элементы, которые вы хотите напрямую, никаких петель не требуется.

Я использовал прямоугольные элементы, а не пути, так как вы не поставляли и не атрибуты d, но принцип тот же.

$("rect[fill='rgb(255, 255, 255)']").css('display', "none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <rect width="90" height="30" fill="black"/> 
 
    <rect width="10" height="10" x="10" y="10" fill="rgb(29,233, 182)"/> 
 
    <rect width="10" height="10" x="30" y="10" fill="rgb(255, 255, 255)" /> 
 
    <rect width="10" height="10" x="50" y="10" fill="rgb(255, 255, 255)" /> 
 
    <rect width="10" height="10" x="70" y="10" fill="rgb(255, 255, 255)"/> 
 
</svg>

источник

2017-02-17 01:16:12

Выберите Svg Path по цвету заливки с помощью jquery

ответ

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