Как стилизовать группу в SVG из внешнего CSS?

Question

[Fedooot01]

Здравствуйте, у меня есть такой SVG файл, который должен показывать разную мощность принимаемого сигнала.

<svg id="cell-strength" viewBox="0 0 29 18" xmlns="http://www.w3.org/2000/svg">
	<style>
		rect { fill: #545454; }
	</style>

	<rect rx="1" id="bar_1" height="7.2" width="5" y="10.8" x="0"/>
	<rect rx="1" id="bar_2" height="10.8" width="5" y="7.2" x="8"/>
	<rect rx="1" id="bar_3" height="14.4" width="5" y="3.6" x="16"/>
	<rect rx="1" id="bar_4" height="18" width="5" y="0" x="24"/>
 
</svg>

В html встраивается таким образом:

<object class="cell-svg" type="image/svg+xml" data="cell.svg"></object>

Я бы хотел указывая разные классы для этого svg, задавать нужную силу сигнала, например:

<object class="cell-svg cell-svg--stength-2" type="image/svg+xml" data="cell.svg"></object>

Должно было бы дать результат:

Я решил, что будет неплохой идеей сгруппировать rect в svg по силе сигнала, задав им имена и потом этим группам менять цвет фона, изменил svg так:

<svg id="cell-strength" viewBox="0 0 29 18" xmlns="http://www.w3.org/2000/svg">
<style>
	rect { fill: #545454; }
</style>
<g id="str-4">
   <g id="str-3">
      <g id="str-2">
         <g id="str-1">
            <rect rx="1" id="bar_1" height="7.2" width="5" y="10.8" x="0"/>
         </g>
         <rect rx="1" id="bar_2" height="10.8" width="5" y="7.2" x="8"/>
      </g>
      <rect rx="1" id="bar_3" height="14.4" width="5" y="3.6" x="16"/>
   </g>
   <rect rx="1" id="bar_4" height="18" width="5" y="0" x="24"/>
</g>
 
</svg>

Код класса cell-svg--stength-2 сделал таким:

.cell-svg--stength-2 g#str-2 rect {
   fill: #fff;
}

Но никакого эффекта это не дает. Пробовал и другие комбинации - без результата. Каким образом можно реализовать изменение картинки внешними классами в CSS?

Comments

[Rustam Bainazarov]

Вставить его напрямую. Либо сделать несколько вариантов и вставлять через #use.

[Ankhena]

Вставить напрямую в код или саму svg вниз, а там где нужно use. Одну SVG.
Обертки в g лишние.
Можно использовать :nth-child для rect

Еще можно нарисовать это градиентами или span'ами на css вообще без svg.

[Fedooot01]

Ankhena, не подскажете подробнее, как можно реализовать вариант с use?

[Ankhena]

Fedooot01, css.yoksel.ru/svg-groups-use
у вас будет только одна svg и один use

Answer 1

[Леонид Роженцев]

Лучше вставить svg в html, присвоить нужным элементам классы или id и стилизовать как обычные элементы

Answer 2

[Максим]

В общем получить к тегу object можно только после загрузки то есть

object.addEventListener("load", function (){ здесь обработчик })

В моём случае я сделал так как написал ..
1) Получил object через id
2) Получил содержимое contentDocument
3) По одному сменил fill для каждого

Содержимое index.html

<object data="file.svg" type="image/svg+xml" id="for_svg" width="400px" height="300px"></object>
    <script>
      document.querySelector("#for_svg").addEventListener("load", function (){
         let html = document.querySelector("#for_svg").contentDocument;
         let rects = html.querySelectorAll("rect");

       rects[0].style.fill = "#222";
       rects[1].style.fill = "#fff";
       rects[2].style.fill = "#fff";
       rects[3].style.fill = "#999";
       rects[4].style.fill = "#999";
    })
    </script>

Содержимое файла svg

<svg viewBox="0 0 460 300" xmlns="http://www.w3.org/2000/svg" width="460" height="300">
    <rect width="460px" height="300px" x="0" y="0" />
    <g>
      <rect width="100px" height="80px" x="0"    y="220" />
      <rect width="100px" height="120px" x="120" y="180" />
      <rect width="100px" height="200px" x="240" y="100" />
      <rect width="100px" height="300px" x="360" y="0" />
    </g>
  </svg>

В итоге получил вот это