I seem to be having trouble getting my SVG element to fill with a specific color in the active state. Despite searching online for examples, I couldn't find much relevant information on this topic. Most of the resources available online focus on hover states for SVGs. While I attempted to use similar methods, I am unable to target my SVG successfully.
The active state works as expected for background and typography elements but doesn't apply to my SVG.
If anything is unclear, please don't hesitate to reach out. Thank you!
To provide better context, I have created a fiddle that can be accessed here
However, I will also include the code below for enhanced visibility. I have simplified the code as much as possible to avoid any confusion due to other elements present.
My HTML:
<div id="contact">
<div class="contact_Me">
<div id="contact_Phone3_Wrapper_mb">
<a href="tel:+xxxxxxxxxxx">
<h3 class="contact_Me_Line_mb">
<div class="contact_Box_Svg_1_mb">
<svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<path id="call" opacity="0.4" fill="#444444" d="M12.965,0.042H2.994c-0.61,0-1.108,0.499-1.108,1.108v12.741
c0,0.609,0.499,1.108,1.108,1.108h9.971c0.61,0,1.11-0.499,1.11-1.108V1.15C14.073,0.541,13.575,0.042,12.965,0.042 M7.979,14.818
c-0.359,0-0.65-0.291-0.65-0.65c0-0.357,0.292-0.65,0.65-0.65c0.36,0,0.651,0.293,0.651,0.65
C8.631,14.527,8.339,14.818,7.979,14.818 M12.411,13.337H3.563H3.548V1.704h8.863V13.337z"/>
</svg>
</div>
<span class="contact_Small_Caps_mb">call:</span>
<span id="contact_Phone_mb">+XX XXX XXX XX XX</span>
</h3>
</a>
</div>
</div>
My CSS:
#contact_mb {
width: 100%;
height: 1000px;
background: white;
margin-top: 30em;
padding-top: 2em;
background: #e7e7e7;
}
#contact_Phone3_Wrapper_mb {
display: block;
margin: 0 auto;
width: 90%;
height: 60px;
margin-bottom: .3em;
background-color: rgba(249,249,249,.3);
border: 1px solid #e2e2e2;
}
#contact_Phone3_Wrapper_mb:active {
background-color: yellow;
}
#contact_Phone3_Wrapper_mb:active h3, #contact_Phone3_Wrapper_mb:active .contact_Small_Caps_mb {
color: #262626;
}
#contact_Phone3_Wrapper_mb:active #call {
fill: #262626;
}
.contact_Me_Line_mb {
color: rgba(68,68,68,.4);
text-align: left;
line-height: 1em;
padding-left: 0em;
}
.contact_Box_Svg_1_mb {
float: left;
width: 15px;
height: 15px;
margin-top: 4px;
margin-left: 14px;
margin-right: 12px;
}
.contact_Small_Caps_mb {
font-variant: small-caps;
font-family: times;
font-size: .8em;
margin-right: 4px;
color: rgba(68,68,68,.2);
}
#contact_Phone_mb {
font-family: arial;
font-size: .7em;
}