Изменить цвет заливки SVG с помощью MakeStyles: как выбрать указанные c идентификаторы в SVG-файле с помощью селекторов?

Question

Предположим, у нас есть следующий код:

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

<g transform="translate(...)" fill="#FFFFFF" id="Circle">

       <path ........ ></path>

</g>



<g transform="translate(...)" fill="#FFFFFF" id="Circle">

        <path ........ ></path>

</g>


<g transform="translate(...)" fill="#FFFFFF" id="Circle">

       <path ........ ></path>

</g>

Реагирующий компонент:

import {ReactSVG} from 'react-svg';
const useStyles = makeStyles(theme => ({
    svg: {
        '& svg g#Circle path': {
            fill: '#fff'
        }
    }
}));

const Logo = () => {
    const classes = useStyles();
    return => {
     <ReactSVG src={SVG_URL} className={classes.svg}/>


     ...

     }
}

Выше у нас есть содержимое файла SVG и Реагируйте на компонент, который меняет цвет заливки.

Я успешно меняю цвет, но немного слишком, так как он также меняет части в SVG, которые я не хочу менять.

Как мы можем изменить MakeStyles, чтобы выбрать только первый и второй g теги (есть 3, я хочу изменить только первый 2 с использованием Material UI MakeStyles).

Answer 1

Вы должны попробовать :not(:last-child) селектор:

const useStyles = makeStyles(theme => ({
    svg: {
        '& svg g#Circle:not(:last-child) path': {
            fill: '#fff'
        }
    }
}));