@Fedooot01

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

Здравствуйте, у меня есть такой SVG файл, который должен показывать разную мощность принимаемого сигнала. 60408a29b91e5366776061.jpeg
<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>

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

Я решил, что будет неплохой идеей сгруппировать 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?
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
Лучше вставить svg в html, присвоить нужным элементам классы или id и стилизовать как обычные элементы
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
I want, women not to get sick
В общем получить к тегу 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>


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

6040c4ebb2f25634899369.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы