S
S
Sergey Kondrashevsky2019-10-30 18:55:11
css
Sergey Kondrashevsky, 2019-10-30 18:55:11

How to get to path in svg?

Hey! I have a slider with elements that have svg. I decided to paint over its individual parts and added its own class to each path, but because I want to apply color when the .slick-current element is, this does not work.
How to get to path?
I will be grateful for your help!

<div class="cooperation-slider">
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__envato">
      <use xlink:href="#envato"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__payoneer">
      <use xlink:href="#payoneer"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__airbnb">
      <use xlink:href="#airbnb"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__paypal">
      <use xlink:href="#paypal"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__google">
      <use xlink:href="#google"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
  <div class="cooperation-slider__item">
    <svg class="cooperation-slider__item-img cooperation-slider__item-img__amazon">
      <use xlink:href="#amazone"></use>
    </svg>
  </div>
  <!-- /.cooperation-slider__item -->
</div>
<!-- /.cooperation-slider -->

Sass
&.slick-current
  .cooperation
    &-slider
      &__item
        &-img
          &__amazon
            fill: #393A3E
            &-arrow
              fill: #FBAD17
          &__payoneer
            fill: #333333
            &-y
              fill: #FF4800
          &__paypal
            fill: #019CDE
            &-blue
              fill: #013088
          &__airbnb
            fill: #fe5b5f
          &__envato
            fill: #323232
            &-logo
              fill: #80B341
          &__google
            &-yellow
              fill: #FBBB00
            &-blue
              fill: #518EF8
            &-green
              fill: #28B446
            &-red
              fill: #F14336

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
akyl-kb, 2019-10-30
@akyl-kb

Why complicate things so much with selectors.
Most likely it does not work because of a non-working selector

.slick-current
    path.color-yellow
        fill: #FBBB00
    path.color-blue
        fill: #518EF8

Apply the desired class to the path element
<path class="color-blue" />

A
Alexander Epikhin, 2019-10-30
@leshiple

code pen

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question