Как стилизовать SVG через CSS?

Question

[Владимир Новицкий]

Здравствуйте.
Вопрос в следующем. Например, есть квадрат в виде SVG. Он белого цвета, находится в определенном блоке:

<div>
   <div class="square"></div>
</div>

и подгружен, как фон через CSS:

.square {
    background:url('square.svg'); /* квадрат белого цвета */
    }

Как сделать, чтобы, если у родительского блока появляется определенный класс, то square.svg меняет цвет:

<div class="black">
   <div class="square"></div>
</div>

.square {
    background:url('square.svg'); /* квадрат должен стать черного цвета */
    }

Запись типа:

.black > .fil { /* .fil — это класс присвоенный в самом файле svg (<path class="fil" />) */
    fill:black;
    }

не помогает.

Comments

[Lynn «Кофеман»]

В фоне никак. Нужно использовать inline svg

[Владимир Новицкий]

Алексей Тен: Жаль. (

[Максим Тимофеев]

А зачем белый квадрат делать с помощью svg? Вы балуетесь с svg? я уверен, что Вашу задачу можно решить более стандартными методами.

[Владимир Новицкий]

Максим Тимофеев: Белый квадрат, это для примера. На самом деле будет фигура посложнее, у которой тоже предстоит менять цвета. Просто с одной строчкой в стилях проще объяснить, что мне нужно.

[Владимир Новицкий]

Если получится с квадратом, значит получится и с более сложными фигурами.

[Максим Тимофеев]

Тогда - вставляете SVG, как код и меняйте его через css, подругому никак

[Владимир Новицкий]

Максим Тимофеев: Ниже было предложение прописывать стили в самом SVG. Но мне не понятно, как там создавать определенные условия, при которых цвет должен меняться.

[Владимир Новицкий]

Может, это тоже невозможно?

[Максим Тимофеев]

Возможно. Там можно прописать стили в том числе и jjjj:hover {fill:#000;}

[Максим Тимофеев]

Сложность в том, что не понятно что Вы хотите получить. Пример прост, но не видно цели.

[Владимир Новицкий]

Максим Тимофеев: hover прописать можно, но мне нужно, чтобы была зависимость от родительского элемента:

<div> <!-- Родительский элемент -->
    <div class="square"></div> <!-- Блок с SVG-фоном -->
</div>

Если к родительскому div'у добавить класс black, то и SVG-фон должен стать черным.
Я не знаю, как проще объяснить.

[Максим Тимофеев]

так и пропишите в svg с учетом родительского элемента

[Владимир Новицкий]

Максим Тимофеев: Пробовал, не прокатывает. Ниже писал об этом.

Answer 1

[Алекс К]

Чтобы применять стили к SVG с помощью CSS, SVG должен быть вставлен как HTML-элемент этого документа. В Вашем случае:

<div>
   <svg class="square black">
       ...
   </svg>
</div>

Comments

[Владимир Новицкий]

Про это уже написали выше. Меня интересует стилизация именно background-image svg.

[Владимир Новицкий]

Но, как я понял, это невозможно.

[Алекс К]

Такой SVG можно только стилизовать через CSS внутри этого SVG.

[Владимир Новицкий]

Алексей Кауль: Было бы прекрасно, но как?

<![CDATA[
    .fil {fill:white}
    .black > .fil {fill:black;}
]]>Такая конструкция тоже не помогает.
Может, как-то по другому надо?

[Алекс К]

Владимир Новицкий: покажите весь SVG. Вот рабочий пример со вставленными в SVG стилями:

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

[Владимир Новицкий]

Алексей Кауль: Вот мой SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3rem" viewBox="0 0 553 553" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
	<defs>
		<style type="text/css">
		<![CDATA[
			.fil {fill:white}
		]]>
		</style>
	</defs>
	<path class="fil" d="M0 0h553v553h-553z" id="svg-logo"/>
</svg>

[Владимир Новицкий]

Обычный квадрат, нарисованный в Кореле и оптимизированный с помощью svgo-gui ( https://github.com/svg/svgo-gui ).

[Алекс К]

Владимир Новицкий: Попробовал прицепить Ваш SVG через background-image. Все отлично работает. Вот HTML код, который использовал.

<body style="background:black">
<div style="background:url(aaa.svg); width:200px; height:200px;"></div>
</body>

[Владимир Новицкий]

Алексей Кауль: Я не спорю, что он работает. Дело в том, что при определенных событиях, к обертывающему div'у ( в вашем случае body) скриптом добавляется класс. Так вот нужно, что, когда класс добавлен, svg менял цвет.
Вот такая конструкция не работает:

<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3rem" viewBox="0 0 553 553" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
    <defs>
        <style type="text/css">
            <![CDATA[
                .fil {
                    fill:white;
                    }
                .black > .fil {
                    fill:black;
                    }
            ]]>
        </style>
    </defs>
    <path class="fil" d="M0 0h553v553h-553z" id="svg-logo"/>
</svg>

[Алекс К]

Владимир Новицкий: Увы, такой сценарий невозможно реализовать. SVG, вставляемый через background-image, исполняется в своей песочнице, и полностью оторван от окружающей среды.

[Владимир Новицкий]

Понятно.