0

Есть SVG катинка, в которой для path задан цвет (fill). Эта картинка используется в качестве фона (background-image) для div. Задача сделать темизацию таким образом, чтобы в зависимости от темы fill менялся. Как грамотно, правильно и без костылей это сделать? Был бы благодарен рабочим примерам.

const toggleTheme = () => {
  const block = document.querySelector(".block");
  block.classList.toggle("block_theme_light");
  block.classList.toggle("block_theme_dark");
};
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.block {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 0v1h2V0H2Zm2 1v2h1V1Zm1 0h2V0H4Zm2 0v3h1V1Zm0 3H5v1h1ZM5 5H4v1h1ZM4 6H3v1h1ZM3 6V5H2v1ZM2 5V4H1v1ZM1 4V1H0v3z'/></svg>");
  background-repeat: repeat;
}

.block_theme_light {
  background-color: red;
  fill: blue; /* Не работает */
}

.block_theme_dark {
  background-color: blue;
  fill: red; /* Не работает */
}
<div class="block block_theme_light">
  <button onclick="toggleTheme()">Toggle theme</button>
</div>

Мне нужен способ динамически менять цвет сердечек на фоне при смене темы без второго svg ресурса.

4
  • Извиняюсь за глупый вопрос, но почему не вставить код картинки в html? 5 апр 2022 в 22:20
  • Дело в том, что это должна быть не картинка, а бэкграунд-паттерн (background-repeat: repeat). Может конечно есть способ каким-то образом замостить картинку и растянуть её на заданную площадь... Очень не хотелось бы городить огороды с двумя картинками, отлчающимися значением fill.
    – posix
    5 апр 2022 в 22:54
  • Посмотреть бы как-нибудь на это 5 апр 2022 в 23:09
  • Добавил код в вопрос
    – posix
    6 апр 2022 в 12:55

3 ответа 3

1

Как вариант, вы можете задать несколько разных "тем" для одного элемента в SVG, вывести их например через <use> и задать им id, а дальше при помощи :target менять их отображение:

SVG (пример)

<svg>
  <style>
    .theme {display: none;}
    .theme:target {display: block;}
  </style>
  <use class="theme" id="red" fill="red">
  <use class="theme" id="blue" fill="blue">
  <use class="theme" id="green" fill="green">
</svg>

После чего сохраним эту картинку на сервере и будем добавлять её в CSS, при этом в ссылке вы можете указывать хеш и use с соответствующим хешу идом, будет отображаться.

Например

body.theme-red .div {
  background-image: url('my-svg.svg#red')
}

body.theme-blue .div {
  background-image: url('my-svg.svg#blue')
}

body.theme-green .div {
  background-image: url('my-svg.svg#green')
}

Я не смог воспроизвести эту механику взаимодействия с svg ни локально в html файле, ни на dev сервере. Могу предположить, что это подобно iframe работает только по https.

Скорее всего вы просто не правильно что-то сделали.

Вот демо с рабочим кодом. Работает даже если открывать SVG локально в браузере.

.coin {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-size: contain;
}

.coin.gold {
  background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#gold');
}

.coin.silver {
  background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#silver');
}

.coin.bronze {
  background-image: url('//minov.pw/for-SO/coin-svgrepo-com.svg#bronze');
}
<h2>Использование в IMG</h2>
<img src="//minov.pw/for-SO/coin-svgrepo-com.svg#gold" width="64">
<img src="//minov.pw/for-SO/coin-svgrepo-com.svg#silver" width="64">
<img src="//minov.pw/for-SO/coin-svgrepo-com.svg#bronze" width="64">

<h2>Использование через background-image</h2>
<span class="coin gold"></span>
<span class="coin silver"></span>
<span class="coin bronze"></span>

А вот код самого SVG (coin-svgrepo-com.svg)

<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="34px" viewBox="0 -4 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <style>
            .coin-color {display: none;}
            .coin-color:target {display: block;}
        </style>
        <path id="dark" d="M 1089.9921 317.041 C 1083.5601 317.041 1077.8981 314.9619 1075.017 311.7937 L 1075.0156 312.8579 C 1074.9926 317.2004 1081.6296 320.9959 1090.0082 320.9959 C 1098.3867 320.9959 1105.0237 317.2004 1105.0007 312.8526 L 1105.0007 312.8526 L 1105.0018 311.7555 C 1102.1317 314.9452 1096.45 317.041 1089.9921 317.041 Z"/>
        <path id="light" d="M 1089.9921 299.0041 C 1081.6133 299.0041 1074.9763 302.7468 1074.9992 307.0151 C 1075.0223 311.2917 1081.6636 315.0369 1089.9921 315.0369 C 1098.3206 315.0369 1104.962 311.2917 1104.9851 307.0151 C 1105.0079 302.7468 1098.371 299.0041 1089.9921 299.0041 Z"/>
    </defs>
    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ui-gambling-website-lined-icnos-casinoshunter" transform="translate(-1123.000000, -417.000000)" fill="#252528" fill-rule="nonzero">
            <g id="square-filled" transform="translate(50.000000, 120.000000)">
                <path d="M1089.99212,297 C1099.33149,297 1107.01459,301.332652 1106.98416,307.025898 C1106.98242,307.347006 1106.95629,307.663791 1106.90684,307.975718 L1106.99991,307.975026 L1106.99991,312.847255 C1107.03018,318.606461 1099.34743,323 1090.00816,323 C1080.66888,323 1072.98613,318.606461 1073.0164,312.847225 L1073.0164,312.847225 L1073.02937,309.689002 L1073.02334,308.055944 L1073.03477,308.148998 L1073.07242,308.293557 C1073.09081,308.34871 1073.09869,308.372347 1073.12738,308.42141 L1073.12738,308.42141 L1073.1878,308.517614 C1073.131,308.289831 1073.08675,308.059184 1073.05551,307.825893 L1073.02841,307.821243 C1072.99736,307.804799 1072.98069,307.795971 1073.03991,307.71699 C1073.01537,307.488141 1073.00135,307.258135 1073.00009,307.025868 C1072.96966,301.332652 1080.65276,297 1089.99212,297 Z M1089.99212,317.040965 C1083.56005,317.040965 1077.89807,314.961914 1075.017,311.793695 L1075.0156,312.857876 C1074.99265,317.200398 1081.62964,320.995904 1090.00816,320.995904 C1098.38667,320.995904 1105.02366,317.200398 1105.00069,312.852566 L1105.00069,312.852566 L1105.00184,311.755469 C1102.13165,314.945176 1096.45004,317.040965 1089.99212,317.040965 Z M1089.99212,299.004096 C1081.61329,299.004096 1074.97632,302.746813 1074.99915,307.015067 C1075.02226,311.291658 1081.66365,315.036868 1089.99212,315.036868 C1098.3206,315.036868 1104.96199,311.291658 1104.9851,307.015097 C1105.00792,302.746813 1098.37096,299.004096 1089.99212,299.004096 Z" id="coin"></path>
                <g class="coin-color" id="gold">
                    <use x="0" y="0" xlink:href="#light" fill="#FFD700"/>
                    <use x="0" y="0" xlink:href="#dark" fill="#7f6b00"/>
                </g>
                <g class="coin-color" id="silver">
                    <use x="0" y="0" xlink:href="#light" fill="#c0c0c0"/>
                    <use x="0" y="0" xlink:href="#dark" fill="#606060"/>
                </g>
                <g class="coin-color" id="bronze">
                    <use x="0" y="0" xlink:href="#light" fill="#CD7F32"/>
                    <use x="0" y="0" xlink:href="#dark" fill="#663f18"/>
                </g>
            </g>
        </g>
    </g>
</svg>

Вся "магия" благодаря псевдоклассу :target

2
  • Я не смог воспроизвести эту механику взаимодействия с svg ни локально в html файле, ни на dev сервере. Могу предположить, что это подобно iframe работает только по https.
    – posix
    6 апр 2022 в 19:14
  • @posix, скорее всего вы что-то не так делаете. Я дополнил ответ.
    – De.Minov
    7 апр 2022 в 7:45
0

Уберите fill из SVG и дайте его родительскому div, которому задаете фон.

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

div {
  margin: auto;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  
/* тут будете задавать сразу и фон, и нужный fill */  
  fill: blue;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='rgb(220,220,220)' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M2.5 19.245l.816 1.506 1.684.31-1.18 1.241.225 1.698-1.545-.739-1.545.739.225-1.698-1.18-1.241 1.684-.31.816-1.506zm19.293-3.851l-.917-.326-1.946 5.471c-1.44-.856-3.521-.263-3.98 1.028-.386 1.085.276 1.953 1.211 2.286 1.11.395 2.609.035 3.183-1.574l1.471-4.135c1.42 1.766 1.881 1.979 1.617 3.305.684-.622 1.002-1.098 1.204-1.664.615-1.729-2.338-3-1.843-4.391zm-7.61-12.343l-8.13 5.493 2.849 7.266c-1.789.323-2.981 2.243-2.438 3.627.467 1.191 1.635 1.43 2.646 1.033 1.201-.47 2.18-1.837 1.502-3.571l-2.381-6.074 6.149-3.992 1.885 4.806c-1.786.323-2.98 2.238-2.439 3.618.468 1.195 1.662 1.427 2.668 1.032 1.192-.467 2.16-1.828 1.483-3.562l-3.794-9.676zm-11.683 8.005l-2.5 2.5 2.5 2.5 2.5-2.5-2.5-2.5zm18.346-8.056l1.029 1.9 2.125.392-1.489 1.566.284 2.142-1.949-.932-1.95.932.284-2.142-1.489-1.566 2.125-.392 1.03-1.9zm-12.193-2.381l-.863-.619-3.284 4.575c-1.059-1.622-3.104-2.051-4.158-.582-.651.907-.341 2.187.538 2.818 1.046.751 2.666.91 3.634-.435l4.133-5.757z'/%3E%3C/svg%3E");
}
<div>
  <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23 6.066v12.065l-11.001 5.869-11-5.869v-12.131l11-6 11.001 6.066zm-21.001 11.465l9.5 5.069v-10.57l-9.5-4.946v10.447zm20.001-10.388l-9.501 4.889v10.568l9.501-5.069v-10.388zm-5.52 1.716l-9.534-4.964-4.349 2.373 9.404 4.896 4.479-2.305zm-8.476-5.541l9.565 4.98 3.832-1.972-9.405-5.185-3.992 2.177z"/></svg>
</div>

1
  • Это немного не то. Тут меняется цвет svg картинки внутри блока, а мне надо менять цвет фона-патерна.
    – posix
    6 апр 2022 в 12:56
0

Придумал ещё вот такой вариант. Не слишком элегантный, громоздкий, но всяко лучше чем две версии одного ресурса в проекте.

const toggleTheme = () => {
  const block = document.querySelector(".block");
  block.classList.toggle("block_theme_light");
  block.classList.toggle("block_theme_dark");
};
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.block {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.block__content {
  position: relative;
}

.block_theme_light {
  background-color: red;
  fill: blue;
}

.block_theme_dark {
  background-color: blue;
  fill: red;
}
<div class="block block_theme_light">
  <svg class="block__background">
    <pattern
      id="pattern-bg"
      width="8"
      height="8"
      patternUnits="userSpaceOnUse"
      viewBox="0 0 8 8"
    >
      <path
        d="M1 0v1h2V0H2Zm2 1v2h1V1Zm1 0h2V0H4Zm2 0v3h1V1Zm0 3H5v1h1ZM5 5H4v1h1ZM4 6H3v1h1ZM3 6V5H2v1ZM2 5V4H1v1ZM1 4V1H0v3z"
      />
    </pattern>
    <rect width="100%" height="100%" fill="url(#pattern-bg)" />
  </svg>
  <div class="block__content">
    <button onclick="toggleTheme()">Toggle theme</button>
  </div>
</div>

Ваш ответ

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

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