Как сделать непрозрачность для сложных svg фигур?

Спасибо
А в моем случае пример не покажите ?

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

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

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

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

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

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

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

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

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

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

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

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

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

Рустам Байназаров, короче я так сделал 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;

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

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

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

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

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

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

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

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

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

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

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

В моем случае я уже смогу добиться 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;
}

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

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

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

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

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

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

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

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

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

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

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

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. Так яндекс советует

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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