Как менять цвет svg-sprite?

Question

Как менять цвет svg-sprite?

Рейтинг: 1Ответов: 2Опубликовано: 06.05.2023

Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте? Перепробовал много разных вариантов, в итоге - ничего не получилось.

Если просто вставить код svg в html - таких проблем не возникает, обращаюсь к path {fill: black} и всё хорошо работает, а тут логику понять не получается.

use.ewq svg path {
  fill: blue
}

<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 25 25" fill="none" id="svg-geo"><g clip-path="url(#aa)"><path d="M12.5498 24.5498C12.5498 24.5498 21.5498 16.0208 21.5498 9.5498C21.5498 7.16286 20.6016 4.87367 18.9138 3.18584C17.2259 1.49802 14.9368 0.549805 12.5498 0.549805C10.1629 0.549805 7.87367 1.49802 6.18584 3.18584C4.49802 4.87367 3.5498 7.16286 3.5498 9.5498C3.5498 16.0208 12.5498 24.5498 12.5498 24.5498ZM12.5498 14.0498C11.3563 14.0498 10.2117 13.5757 9.36782 12.7318C8.52391 11.8879 8.0498 10.7433 8.0498 9.5498C8.0498 8.35633 8.52391 7.21174 9.36782 6.36782C10.2117 5.52391 11.3563 5.0498 12.5498 5.0498C13.7433 5.0498 14.8879 5.52391 15.7318 6.36782C16.5757 7.21174 17.0498 8.35633 17.0498 9.5498C17.0498 10.7433 16.5757 11.8879 15.7318 12.7318C14.8879 13.5757 13.7433 14.0498 12.5498 14.0498Z" fill="#F24957"/></g><defs><clipPath id="aa"><path fill="#fff" transform="translate(.55 .55)" d="M0 0H24V24H0z"/></clipPath></defs></symbol></svg>

<svg>
    <use class='ewq' xlink:href='#svg-geo'></use>
</svg>

На всякий случай оставляю пример приведённый в codepen https://codepen.io/myrumpel/pen/PoyEvox

css html svg спрайт

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Ребятки, час в codepen не прошёл зря, поэтому делюсь с теми, кто не знает ответа на вопрос:

use.test1 {
  fill: red
}
use.test2 {
  fill: purple
}
use.test3 {
  fill: yellow
}

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 25 25" id="svg-geoe"><g clip-path="url(#aa)"><path d="M12.5498 24.5498C12.5498 24.5498 21.5498 16.0208 21.5498 9.5498C21.5498 7.16286 20.6016 4.87367 18.9138 3.18584C17.2259 1.49802 14.9368 0.549805 12.5498 0.549805C10.1629 0.549805 7.87367 1.49802 6.18584 3.18584C4.49802 4.87367 3.5498 7.16286 3.5498 9.5498C3.5498 16.0208 12.5498 24.5498 12.5498 24.5498ZM12.5498 14.0498C11.3563 14.0498 10.2117 13.5757 9.36782 12.7318C8.52391 11.8879 8.0498 10.7433 8.0498 9.5498C8.0498 8.35633 8.52391 7.21174 9.36782 6.36782C10.2117 5.52391 11.3563 5.0498 12.5498 5.0498C13.7433 5.0498 14.8879 5.52391 15.7318 6.36782C16.5757 7.21174 17.0498 8.35633 17.0498 9.5498C17.0498 10.7433 16.5757 11.8879 15.7318 12.7318C14.8879 13.5757 13.7433 14.0498 12.5498 14.0498Z" /><symbol viewBox="0 0 25 25" id="svg-geo"><g clip-path="url(#aa)"><path d="M12.5498 24.5498C12.5498 24.5498 21.5498 16.0208 21.5498 9.5498C21.5498 7.16286 20.6016 4.87367 18.9138 3.18584C17.2259 1.49802 14.9368 0.549805 12.5498 0.549805C10.1629 0.549805 7.87367 1.49802 6.18584 3.18584C4.49802 4.87367 3.5498 7.16286 3.5498 9.5498C3.5498 16.0208 12.5498 24.5498 12.5498 24.5498ZM12.5498 14.0498C11.3563 14.0498 10.2117 13.5757 9.36782 12.7318C8.52391 11.8879 8.0498 10.7433 8.0498 9.5498C8.0498 8.35633 8.52391 7.21174 9.36782 6.36782C10.2117 5.52391 11.3563 5.0498 12.5498 5.0498C13.7433 5.0498 14.8879 5.52391 15.7318 6.36782C16.5757 7.21174 17.0498 8.35633 17.0498 9.5498C17.0498 10.7433 16.5757 11.8879 15.7318 12.7318C14.8879 13.5757 13.7433 14.0498 12.5498 14.0498Z" /></g><defs><clipPath id="aa"><path  transform="translate(.55 .55)" d="M0 0H24V24H0z"/></clipPath></defs></symbol></svg>

<svg>
    <use class='test1' href='#svg-geo'></use>
</svg>
<svg>
    <use class='test2' href='#svg-geoe'></use>
</svg>
  <svg>
    <use class='test3' href='#svg-geoe'></use>
</svg>

Во-первых, удаляем из кода svg-sprite`а подобные строки:

style="display: none;"
fill="#F24957"
fill="none"

Так как мы используем тег use, добавляем ему класс и обращаемся к конкретному svg таким образом:

use.ewq {
  fill: red
}

Здесь мы обращаемся к тегу use, у которого есть класс test1 и сразу (без path) прописываем fill, либо stroke (это зависит от того, какая у вас svg (fill - заливка, stroke - обводка))

Таким образом мы можем тягать одну и ту же svg картинку в разные места и стилизовать её по-разному.

Answer 2

▲ 4

Со стилями всё стандартно и просто, как в учебниках. Одно не пойму - почему, для создания простейших фигур, столько лишнего в SVG ? Такое пишется вручную, безо всяких редакторов:

svg { display: inline-block; width: 150px; }

use.test1 { fill: red; }
use.test2 { fill: purple; }
use.test3 { fill: yellow; }

<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol viewBox="0 0 25 25" id="svg-geo">
      <path fill-rule="evenodd" 
            d="
            M 12.5 25 
            C 12.5 25 3.5 15.5 3.5 9.5 
            A 9 9 1 0 1 21.5 9.5 
            C 22 15.5 12.5 25 12.5 25 Z 
            M 8 9.5 
            A 4 4 1 0 1 17 9.5 
            A 4 4 1 0 1 8 9.5 Z" />
    </symbol>
  </defs>
</svg>

<svg><use class='test1' xlink:href='#svg-geo'></use></svg>
<svg><use class='test2' xlink:href='#svg-geo'></use></svg>
<svg><use class='test3' xlink:href='#svg-geo'></use></svg>

Как менять цвет svg-sprite?

Ответы