SVG и CSS variables

<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.


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

Async CSS

  • По умолчанию при обработке CSS визуализация страницы блокируется.
  • С помощью медиазапросов обработку некоторых CSS-файлов можно отложить.
  • Браузер скачивает все CSS-файлы (как с медиазапросами, так и без них).

Идемпотентные методы HTTP

Методы GET, PUT, DELETE являются идемпотентными - многократные идентичные запросы такого типа приводят к такому же эффекту, как и от одиночного запроса, при условии что не сервер не меняет своё состояние между запросами