1

Собственно, как составить каскад в 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

4
  • Если вы с codeopen скопировали, то как-то не правильно скопировали, я скопировал и нормально цвет меняется 6 мая в 10:00
  • Евгений, я нашёл ответ на вопрос несколько минут назад, сейчас сижу и пишу ответ. Сидел и экспериментировал в codepen, там всё правильно) Но спасибо за ответ) 6 мая в 10:05
  • Да тут прикол в том, чтобы не засорять html верхняя часть заполняется в отдельном файле, который подключается к основному и вы выводите svg картинку сокращённым видом где - xlink:href='#svg-geo' указывает на id нужного svg, который вы хотите вывести. 6 мая в 10:08
  • @ЕвгенийЛи, оно у меня так в проекте и реализовано. Вопрос был в смене цвета у svg, которые тягаются из спрайта. Ответ расписал ниже) 6 мая в 10:18

2 ответа 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>

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 картинку в разные места и стилизовать её по-разному.

14
  • А у меня вопрос есть, проще таким образом подтягивать svg или прописывать через <img src="image.svg">, а потом с помощью JS конвертировать его в svg? 6 мая в 10:23
  • @ЕвгенийЛи, предложенный Вами способ я не пробовал, но если подумать, то этот вариант (спрайт) будет удобнее и функциональнее: 1) Насколько мне известно, то если подключать svg через img, то эти изображения меньше поддаются изменениям; 2) Здесь плагин собирает все svg в один отдельный файл и мы сниппетом подключаем это изображение, к которому можем обращаться напрямую, помимо этого, svg из спрайтов можно анимировать. 3) Так же, насколько мне известно, файл спрайта кешируется, а уже из него тягаются все svg. 4) И после работы с svg, они не подвергаются никакой дальнейшей обработки. 6 мая в 10:32
  • 1
    Хорошие преимущества. Я пользовался заполнением через img и плюс такого подхода был в том, что контент-менеджер без помощи разработчика сайта мог через админку загружать svg иконки любые и они автоматом преобразовывались в svg и приобретали тот цвет и размер, который был прописан для них в CSS. Дело было в том, что было меню в котором к каждому разделу прилагалась иконка этого раздела и эти разделы могли меняться через админку, и к тому же у этого сайта работали 2 темы, зимняя и летняя, когда переключаешь с зелёной на синюю, все цвета всех иконок на сайте должны были меняться. 6 мая в 10:43
  • Вообще подходов к загрузке svg очень много я заметил и каждый пользуется тем, что удобней или в зависимости от поставленной цели)) 6 мая в 10:47
  • 1
    xlink писать не обязательно 6 мая в 11:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.