Блог

Я сталкиваюсь с некоторой проблемой в svg, если я изменяю цвет заливки элемента второй группы, то он также изменяет цвет заливки первого элемента g. Оба находятся в одном и том же положении . Есть ли какой-либо способ изменить цвет второго элемента g без изменения цвета заливки первого элемента g.

 <svg width="100%" height="100%">

  <!-- draw rectangle -->
  <g>
  <g transform="translate(50,50)">
    <path d="M0,0 150,0 150,50 0,50" style="fill:red;" />
  </g>
    <g transform="translate(50,50)">
    <path d="M0,0 350,0 350,100 0,150" style="fill:green;" />
  </g>
  </g>
</svg>
 

Ваш пример кода работает так, как задумано, он устанавливает первый элемент красным, а второй зеленым. Однако, поскольку эти элементы перекрываются, непрозрачны и не имеют пробелов, отображается только элемент вверху (2-й).

Чтобы убедиться, что это работает, вы можете попробовать:

• Удаление перевода, чтобы можно было видеть оба цветных блока
• Изменение непрозрачной заливки на заливку с альфа-каналом, делающую ее слегка прозрачной, также покажет оба элемента (попробуйте заменить fill:green на fill: rgba(123,123,123,0.5)

Я думаю, проблема в том, что второй элемент покрывается первым. Вы можете просто использовать свойство css z-index . Элемент, который вы хотите отобразить вверху, должен иметь более высокий индекс z, чем у другого.

Вы можете сделать что-то подобное :

 svg g:nth-child(2) path{
  fill:Yellow;
}