Как svg sprite подружить с sass переменными?

Question

[Genri_Rus]

Допустим есть svg спрайт

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="menu-white" viewBox="0 0 42 42">   
        <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
            <circle cx="19.5" cy="10.5" r="2.5" fill="var($color-white)"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="var($color-white)"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="var($color-white)"/>
    </symbol>
</svg>

В sass соответственно объявлена переменная: $color-white: #fff

Как можно передать переменную $color-white в svg?

Comments

[Rustam Bainazarov]

Вот так попробуйте объявить переменную:
#{$var}

Вот только вопрос, а где вы её вызываете? В HTML? Если так, то я не знаю, как связать их напрямую с HTML, шаблонизатором или ещё там чем-то.

[Genri_Rus]

Рустам Байназаров, вот так ?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="menu-white" viewBox="0 0 42 42">   
        <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
            <circle cx="19.5" cy="10.5" r="2.5" fill="#{$color-white}"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="#{$color-white}"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="#{$color-white}"/>
    </symbol>
</svg>

Но у меня спрайт находится в sprite.svg

[Rustam Bainazarov]

Genri_Rus, ну тогда вы должны через CSS управлять, currentColor в значения, где переменные, и в CSS задавайте его для SVG.

Answer 1

[RAX7]

https://css-tricks.com/cascading-svg-fill-color/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
  <symbol id="menu-white" viewBox="0 0 42 42">
    <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
    <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor"/>
    <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor"/>
    <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor"/>
  </symbol>
</svg>

<svg class="ico" width="42" height="42"><use xlink:href="#menu-white"/></svg>

$color-white: #fff;

.ico {
  color: $color-white;
}

Comments

[Genri_Rus]

Спасибо большое

А вот hover как ?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="menu-white" viewBox="0 0 42 42">   
        <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
        <g class="color-change">
            <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor"/>
        </g>
    </symbol>
</svg>

Допустим для color-change добавить hover эффект

[RAX7]

Genri_Rus, в спрайте только так:

$color-white: #fff;
$color-not-white: #f00;

.ico {
  color: $color-white;
}
.ico:hover {
  color: $color-not-white;
}

Если заинлайнить svg в html

<svg class="ico" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2" />
  <g class="color-change">
    <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor" />
    <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor" />
    <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor" />
  </g>
</svg>

то можешь сделать так:

$color-white: #fff;
$color-not-white: #f00;

.ico {
  color: $color-white;
}
.color-change:hover {
  color: $color-not-white;
}

[Genri_Rus]

RAX7, спасибо большое

Очень сильно помогли

[Genri_Rus]

RAX7, а вот как в hover эффекте задать color: transparent ?

[RAX7]

Genri_Rus, $color-not-white: transparent;

[Genri_Rus]

RAX7, вот так не работает

$color-not-white: transparent;
color: $color-not-white

[RAX7]

Genri_Rus, да вроде всё работает
https://jsfiddle.net/15neproa/

[Genri_Rus]

RAX7, а если у меня svg спрайт ?

[RAX7]

Genri_Rus, https://jsfiddle.net/15neproa/1/

[Genri_Rus]

RAX7, спасибо большое

Буду разбираться

[Genri_Rus]

RAX7, а еще такой вопрос

Вообще можно ли подставлять svg sprite по id #svg в сам css при hover?

Допустим при наведении подставлять другую иконку в спрайте

Ну что-то такое background: url('тут sprite.svg#menu-white')

[RAX7]

Genri_Rus, по моему это работает только в firefox

[Genri_Rus]

RAX7, ясно

Сейчас у меня возникла другая проблема

Вот тут: https://jsfiddle.net/15neproa/1/

При наведении меняется только сами кружочки, но как поменять цвет и самого круга ?
fill="green" при hover заливает все маленькие кружочки

[Genri_Rus]

RAX7, я так понял, что только можно с помощью дефолтных переменных fill="var($color-white) ?

С помощью sass такое реализовать невозможно ?

[Rustam Bainazarov]

Genri_Rus, потому что так символьные иконки не делают. Обычно они должны быть все обьёдинены в один путь, а не состоять из разных путей и фигур, чтобы вы могли заливать цветом спокойно для себя.

Ибо если у вас в иконке несколько фигур, у которых где-то fill, а где-то stroke надо менять, то вам придётся писать CSS-правила для каждой такой иконки и фигур внутри отдельно, иначе заливка цвета будет из разряда той, которую вы описали.

Либо можно сделать правила для двух классов, которые надо добавлять в разметку SVG для каждого элемента, зависимости того, что нужно для него красить (fill или stroke).

[Genri_Rus]

Рустам Байназаров, немного не понятно

Просто для наглядности что можно сделать с данным svg спрайтом ?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="menu-white" viewBox="0 0 42 42">   
        <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2"/>
            <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor"/>
            <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor"/>
            <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor"/>
    </symbol>
</svg>

Path тут нет или его можно сгенерировать ?

[Rustam Bainazarov]

Genri_Rus, объединяете все фигуры в путь в графическом редакторе.

[Rustam Bainazarov]

Genri_Rus, а, так у вас многоцветная иконка. Ну тогда вам надо для каждой фигуры писать отдельное правило для hover, иначе вы на все фигуры одновременно делаете одинаковую заливку.

[Genri_Rus]

Рустам Байназаров, иконка была нарисована в фигме

Генератор online есть какой-нибудь для таких целей или все таки illustrator придется использовать ?

[Genri_Rus]

Рустам Байназаров, сможете показать небольшой пример, что нужно сделать ?

P.S. Мне маленькие кружочки нужно менять отдельно от главного круга при том, что круг при наведении тоже должен меняться

[Rustam Bainazarov]

Genri_Rus,

[Genri_Rus]

Рустам Байназаров, а у меня hover не работает почему-то

[Rustam Bainazarov]

Genri_Rus, переделал на классы. Обновите страницу и посмотрите ещё раз.

[Genri_Rus]

Рустам Байназаров, странно, не работает
P.S. Походу баг какой-то

[Rustam Bainazarov]

Genri_Rus, а, да, точно, такая штука только в Firefox будет работать, я забыл.

[Genri_Rus]

Рустам Байназаров, ну вот приехали X!D

Получается я нашел минусы sass ?

Придется делать с помощью дефолтных переменных в css ?
fill="var($color-white)"

[Rustam Bainazarov]

Genri_Rus, а при чем тут SASS? Он тут вообще не при чем. Это механизм работы вставки SVG с помощью #use.

[Genri_Rus]

Рустам Байназаров, т.е. так можно делать ?

SASS чисто для css кода, а svg - создавать в css дефолтные переменные для оформления вектора ?

[Genri_Rus]

Рустам Байназаров, да можно и так, но отдельный файл как-то красивее что ли смотрится

[Rustam Bainazarov]

Genri_Rus, у вас путаница технологий и их сфер влияния.

Да, так можно делать. Просто это не кешируется + плодит разметку, ибо вставляется просто как HTML, что не позволяет реиспользовать иконку везде и менять её в одном месте. Если бы у вас была односложная иконка, то этой проблемы бы не было. По причине ограничений работы связки #use + CSS — это ваш единственный путь.

Хотя есть ещё и JS-путь, но это усложнение процесса, которое мне лень описывать.

[Genri_Rus]

Рустам Байназаров, а разве инлайново не кешируется ?

<svg class="icon-svg">
     <use xlink:href="sprite.svg#icon"></use>
</svg>

[Rustam Bainazarov]

Genri_Rus, нет.

Кешируется только если вы вызываете SVG-иконку через #use из внешнего файла:
https://css-tricks.com/svg-use-external-source/

[Genri_Rus]

Рустам Байназаров, ну sprite.svg разве не внешний файл или я что-то путаю ?

[Rustam Bainazarov]

Genri_Rus, если вы вставляете его в разметку, то нет. Если он лежит где-то на сервере — то да.

Я без понятия, как вы там вставляете. Из внешнего файла, это вот так, например:

<svg>
    <use xlink:href="https://www.site.ru/assets/img/sprite.svg#icon"></use>
</svg>

[Genri_Rus]

RAX7, какой вы более лучший вариант посоветуете в данной ситуации ?

Если у меня svg состоит из нескольких фигур и для каждой фигуры нужно задать определенный свой цвет ?

[RAX7]

Genri_Rus, инлайнить svg в html ¯\_(ツ)_/¯

[Genri_Rus]

RAX7, а что насчет кеширования ?)

И почему никто не предложил js вариант ?
Или там с DOM также будут проблемы ?

[Genri_Rus]

RAX7, а можно так сделать ?

SASS чисто для css кода, а svg - создавать в css дефолтные переменные для оформления вектора ?

При этом спрайт будет в виде внешнего файла

[Genri_Rus]

RAX7, я если такой вариант ?

var icon = "\
<svg version=\"1.1\" xmlns=\"http:\\//www.w3.org/2000/svg\" xmlns:xlink=\"http:\\//www.w3.org/1999/xlink\">\
    <symbol id=\"menu-white\" viewBox=\"0 0 42 42\">\
        <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\"/>\
        <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" fill=\"currentColor\"/>\
        <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" fill=\"currentColor\"/>\
        <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" fill=\"currentColor\"/>\
    </symbol>\
<\/svg>"; 

document.getElementById('svg-icon').innerHTML = icon;

<svg class="icon color-svg">
     <use id="svg-icon" xlink:href="#menu-white"></use>
</svg>

P.S. Так яндекс советует

[Genri_Rus]

Рустам Байназаров, как вам вариант выше который ?

Яндекс так советует делать

[RAX7]

Genri_Rus,
вот варианты использования svg без js https://vecta.io/blog/best-way-to-embed-svg
вот вариант с кэшированием с помощью js https://css-tricks.com/inline-svg-cached/

[Rustam Bainazarov]

Genri_Rus, я не знаю, зачем так делает Яндекс. Гавно какое-то. Зато будет работать в IE.

Но для этого есть знаменитый:
https://github.com/jonathantneal/svg4everybody

Поэтому смысла я не вижу.

[Genri_Rus]

RAX7, спасибо, но опять таки, в вашем примере с js - svg придется вставить в html страницу

А мне нужно в виде отдельного файла svg, либо отдельного файла js

Насчет кэширования с помощью js в вашем примере я понял, но тогда svg спрайт можно вставить только на html странице ?

[Genri_Rus]

Рустам Байназаров, спасибо

Я так понял в нем уже встроен полифил для поддержки на старых браузерах ?

[Rustam Bainazarov]

Genri_Rus, да. Я им уже года два пользуюсь IE и EDGE — всё отлично.

[Genri_Rus]

Рустам Байназаров, круто тогда )

В моем случае я уже смогу добиться hover эффекта для сложных фигур ?

Типа так:

<svg class="ico" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="20" cy="20" r="19" stroke="white" stroke-width="2" />
  <g class="color-change">
    <circle cx="19.5" cy="10.5" r="2.5" fill="currentColor" />
    <circle cx="19.5" cy="19.5" r="2.5" fill="currentColor" />
    <circle cx="19.5" cy="28.5" r="2.5" fill="currentColor" />
  </g>
</svg>

А потом уже в sass

.color-change:hover {
  color: $color-not-white;
}

[Rustam Bainazarov]

Genri_Rus, нет. Все те же ограничения использования #use, которые мы обсуждали сохранятся…

[Genri_Rus]

Рустам Байназаров, жаль (

Т.е. в моем случае только на html страницу вставлять спрайт и кэшировать его с помощью js ?

[Rustam Bainazarov]

Genri_Rus, да. Грузите файл JS, LOL. Или просто одну иконку вставьте напрямую.

[Genri_Rus]

Рустам Байназаров, костыли прям какие-то с этим svg

Просто можно icomoon использовать для преобразования svg спрайта в шрифтовые иконки, но тогда качество упадет

[Rustam Bainazarov]

Genri_Rus, и смысл? Качество не упадёт, просто они тоже будут одноцветными, ибо они состоят из одного пути.

[Genri_Rus]

Рустам Байназаров, а точно, я совсем забыл про маленькие кружочки

CSS тогда проще :D

[Genri_Rus]

Рустам Байназаров, короче я так сделал X!D, мне важен отдельный sprite файл, плюс он кэшируется и все меняется

var icon = "\
<svg version=\"1.1\" xmlns=\"http:\\//www.w3.org/2000/svg\" xmlns:xlink=\"http:\\//www.w3.org/1999/xlink\">\
    <symbol id=\"menu-white\" viewBox=\"0 0 42 42\">\
        <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\"/>\
        <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" fill=\"currentColor\"/>\
        <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" fill=\"currentColor\"/>\
        <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" fill=\"currentColor\"/>\
    </symbol>\
<\/svg>"; 

document.getElementById('svg-icon').innerHTML = icon;

[Genri_Rus]

Рустам Байназаров, на IE выше вариант не работает, полифил в данном случае поможет ?

[Rustam Bainazarov]

Genri_Rus, он не для этого предназначен.

[Genri_Rus]

Рустам Байназаров, он для use предназначен, оговорился )

И в чем проблема ?

https://jsfiddle.net/Genri_Rus/4c5wgLaj/

[Rustam Bainazarov]

Genri_Rus, напрямую вставь, а не через #use.

[Genri_Rus]

Рустам Байназаров, без #use не работает

[Rustam Bainazarov]

Genri_Rus, мужик, ну вставь ты, господи, просто разметку SVG внутрь блока.

[Genri_Rus]

Рустам Байназаров, мне нужно именно в таком варианте: https://jsfiddle.net/Genri_Rus/4c5wgLaj/9/

Без use js не подтягивает спрайт

P.S. Ставил svg и id, все равно не выводится

[Rustam Bainazarov]

Genri_Rus, ты разметку, судя по всему, не смотришь, совсем. Вставляешь SVG в SVG.



Или вставляй всю разметку SVG в блок, а не внутренности отдельно. Словом, извини, но мне уже лень участвовать, поэтому, если что не так, ты, надеюсь, разберёшься.

[Genri_Rus]

Рустам Байназаров, мне нужен svg спрайт

В вашем примере вы просто вставляете файл иконки

А если мне в будущем нужно будет больше иконок ?

Придется дублировать ?

var iconOne = "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"; 

document.getElementById('svg-icon-one').innerHTML = iconOne;

var iconTwo = "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"; 

document.getElementById('svg-icon-two').innerHTML = iconTwo;

[Rustam Bainazarov]

Genri_Rus, ...

У тебя уже есть переменная. Зачем её дублировать?



Вообще, тут нужна функция, которая бы принимала из каждого такого тега data-значение (а-ля <div class="icon" data-icon="menu-icon"></div>), искала бы нужную разметку в JS и вставляла её. Так можно держать кучи иконок и не делать это вручную. Я этим заниматься не буду.

[Genri_Rus]

Рустам Байназаров, спасибо Вам большое

Буду разбираться

[Genri_Rus]

Рустам Байназаров, вы имели ввиду сделать что-то типа такого ?

https://jsfiddle.net/Genri_Rus/8cfeuw4z/

Но у меня не выводится по data-id

[Rustam Bainazarov]

Genri_Rus, нет. Сделать функцию, которая проходилась бы по всему массиву элементов и для каждого элемента брала значение из атрибута и вставляла нужную иконку. У вас получилась та же самая функция, что и написал и я. Просто выборка элементов не по классу, а по атрибуту.

[Genri_Rus]

Рустам Байназаров, типа так ?

var icon = [
{
menu-icon: "<circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\" class=\"icon-big\"/>\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" class=\"icon-small\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" class=\"icon-small\"/>"
},
и т.д.
];

[Rustam Bainazarov]

Genri_Rus, это лишь 5% того, что надо сделать.

[Genri_Rus]

Рустам Байназаров, ну потом цикл foreach и искать в DOM дереве data-icon?

[Rustam Bainazarov]

Genri_Rus, потом следить за изменением DOM, искать нужную иконку в соответствии с data-атрибутом элемента, вставлять именно её и т. п.

Ну коли занялись писать, это целый плагин вам нужно

[Genri_Rus]

Рустам Байназаров, а есть что-то похожее из готового варианта ?

[Rustam Bainazarov]

Genri_Rus, я не видел.

[Genri_Rus]

Рустам Байназаров, так что ле ?

https://codepen.io/Genri_Rus/pen/eYOxjwo

[Genri_Rus]

Рустам Байназаров, я правильно понял ?

[Rustam Bainazarov]

Genri_Rus, нет. Нужно, чтобы нужная иконка искалась в массиве по идентификатору из DOM и подставлялась в это место.

[Genri_Rus]

Рустам Байназаров, ну так добавить в объект js svg и все ищется по data атрибутам из DOM

Допустим если:

<div class="icon" data-icon="menu-icon"></div>, то туда и добавится иконка

[Rustam Bainazarov]

Genri_Rus, а теперь несколько и разных, а не одна.

[Genri_Rus]

Рустам Байназаров, ну все работает

<div class="icon" data-icon="menu-icon"></div>
<div class="icon" data-icon="footer-icon"></div>

[Rustam Bainazarov]

Genri_Rus, ну, я примера ведь не видел, тогда отлично, поздравляю.

[Genri_Rus]

Рустам Байназаров, в ie кстати работать не будет