Currently, I am working on a project that involves the use of SVG icons. I would like these icons to have a consistent style without being affected by selectors.
I have encountered an issue where I am unable to apply styling to the <path> elements within the <svg> using a selector.
In the provided code snippet, the styling with .ribbon-color is functional. However, when attempting to implement multiple colors on a single page with .yellow-ribbon .ribbon-color, it does not work as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.svg-block {
width: 0px;
height: 0px;
overflow: hidden;
}
/*This is working*/
.ribbon-color {
fill: red;
}
/*This is Not working*/
.yellow-ribbon .ribbon-color {
fill: yellow;
}
</style>
<script>
</script>
</head>
<body>
<div class="svg-block">
<svg xmlns="http://www.w3.org/2000/svg">
<g id="ribbon-Color" width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
<g id="Group_10971" data-name="Group 10971" transform="translate(-340.947 -751.995)">
<path class="ribbon-color" id="Path_1970" data-name="Path 1970" d="M-17661.223-23233v5.037h4.4l-2.02-2.312Z"
transform="translate(18002.17 23984.998)" />
<path class="ribbon-color" id="Path_1971" data-name="Path 1971" d="M-17661.223-23233v6.512h4.346l-2-2.988Z"
transform="translate(18053.248 24050.188)" />
<path class="ribbon-color" id="Subtraction_8" data-name="Subtraction 8"
d="M55.425,71.7l0,0L0,0H33L55.425,29.006V71.7Z" transform="translate(340.947 751.998)" />
</g>
</g>
</svg>
</div>
<div class="red-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
<use xlink:href="#ribbon-Color"></use>
</svg> </div>
<div class="yellow-ribbon"> <svg width="55.425" height="71.707" viewBox="0 0 55.425 71.707">
<use xlink:href="#ribbon-Color"></use>
</svg> </div>
</body>
</html>