[Vuejs]-Change color svg file using css

2πŸ‘

@michal
Remove β€˜fill=β€β€β€˜ property from all tag inside svg tag, then you will get result.

πŸ‘€Kishor Namdeo

1πŸ‘

I have other solution. I added to scss file filter for example:

&__image {
    filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);
}

To convert the color to the filter format (for example: #ef4f10) use CSS filter generator to convert from black to target hex color.

The best effest is when default color in SVG file is black: fill="#000000".

πŸ‘€michal

0πŸ‘

Use CSS On SVG

svg{
    fill: #fff;
    stroke: #fff;
}

Hope it will work for you

πŸ‘€Aman

0πŸ‘

add !important at the end of style.
eg

.class g g{
fill:#fff!important;
}

0πŸ‘

The best thing you can do is to bind to attribute

<path v-bind:fill="this.skinColorContent"


export default {
    data() {
        return {
            skinColorContent: 'red',
        }
    },
}
πŸ‘€Lepy

Leave a comment