SVG как symbol - как залить внутри?

[sol_los]

итак имеем иконку

вписал в страницу так

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="arrow_for_btn">
        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect class="bgr" width="25" height="25" rx="12.5" />
            <path class="arr" d="M13.0842 8L12.3053 8.88304L14.9052 11.8709H7V13.1291H14.9052L12.3053 16.117L13.0842 17L17 12.5L13.0842 8Z" />
        </svg>
    </symbol>
</svg>

в нужном месте вставляю ее

<section id="main-section">
<svg class="btn-icon"><use xlink:href="#arrow_for_btn" /></svg>
</section>

и пытаюсь установить стили

//так
#main-section  svg rect{
   fill: red;
}
//и через класс
#main-section  svg .arr {
   fill: #fff;
}

и нифига не получается
работает только если svg установить fill - но результат тогда не тот

это не работоспособная штука или есть еще какая-то хитрость?

очень хочется вместо 20 вариантов иконок рисовать одну и украшать.

 

[Astronaut]

есть ocmod для того что бы опенкарт с svg работал
это не решение вашего вопроса
это к теме svg в общем
может кто искать будет

Скрытое содержимое. Вам нужно войти или зарегистрироваться.

 

[archi1]

Вы пытаетесь установить стили для класса и для тега `rect` используя один и тот же селектор.

**Исправление**

CSS:
```css
#main-section svg rect{
fill: red;
}

#main-section .arr {
fill: #fff;
}
```

пробуй я у нейронки спросил

To fix the problem in the code, you
need to use the `id` attribute. The `id` attribute allows you to specifically target the SVG elements. Here is the corrected code:

```css
#main-section svg #arrow_for_btn rect {
fill: red;
}

#main-section svg #arrow_for_btn .arr {
fill: #fff;
}
```

 

[sol_los]

#main-section svg #arrow_for_btn rect {
fill: red;
}

#main-section svg #arrow_for_btn .arr {
fill: #fff;
}

неа. это работает если назначать стили напрямую к svg, а вот когда svg подключен через <use xlink:href="" /> - такой способ не прокатывает

 

[rino]

Можно в css назначить иконке один цвет, а второй фигуре в иконке вписать в тело fill="currentColor". А в css это будет color. Тогда будет два цвета:

.btn-icon{
  fill: red;
  color:  green;
}

<rect  ...
<path fill="currentColor" ...

По-другому вроде никак.

 

[rino]

А! Нашел как разукрасить, с пом. CSS-переменных:

.ico{
--red: #ff0000;
--blue: #00ff00;
--green: #0000ff;
}

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico-symb" width="90" height="90" viewBox="0 0 90 90">
  <circle fill="var(--red)" cx="40" cy="40" r="30"/>
  <circle fill="var(--blue)" cx="70" cy="70" r="30"/>
  <circle fill="var(--green)" cx="20" cy="80" r="30"/>
</symbol>
</svg>

<svg class="ico"><use xlink:href="#ico-symb" /></svg>

Кстати, символу дисплей нан не нужен, его и так не будет видно.

.ico1{
--red: #ff0000;
--blue: #00ff00;
--green: #0000ff;
}
.ico2{
--red: #cc6666;
--blue: #81a2be;
--green: #f0c674;
}

<svg class="ico1"><use xlink:href="#ico-symb" /></svg>
<svg class="ico2"><use xlink:href="#ico-symb" /></svg>

 

[sol_los]

А! Нашел как разукрасить, с пом. CSS-переменных:

красава. вот это я понимаю помощь! лови плюсик