SVG и CSS variables

Опубликовано в Общее • 16 мая 2019 г. • 1 мин. на чтение 
<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle stroke="var(--stroke-color, #979797)" cx="7" cy="7" r="7"></circle>
        <path fill="var(--fill-color, #979797)" d="..."></path>
    </g>
</svg>

или

<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        <![CDATA[
        circle {
            stroke: var(--stroke-color, #979797);
        }
        path {
            fill: var(--fill-color, #979797);
        }
      ]]>
    </style>
    <g>
        <circle cx="7" cy="7" r="7"></circle>
        <path d="..."></path>
    </g>
</svg>

P.S. Нужно было прокинуть css переменную в svg из background, но нет способа это сделать. Фоновое изображение, оно не является частью DOM, и нет возможности им манипулировать. В итоге сделал двумя svg.

Похожие записи

Классы visible-** и hidden-** в Bootstrap 4

Использование классов Bootstrap 4 для скрытия и отображения элементов на разных разрешения (xs, sm, md, lg) устройств при разработке адаптивных страниц