SVG图标在激活时不会填充颜色

Question

我有一个svg元素，不会在活动状态下填充为特定的颜色。 我尝试在网上查找示例，但找不到与该主题相关的内容，大多数在线内容与SVG的悬停状态有关，我尝试使用该方法，但由于某些原因，我似乎无法定位SVG 。

激活状态可以在元素背景和版式上正常工作，但不会针对我的SVG。

如果有不清楚的地方，请告诉我，非常感谢！

我创建了一个小提琴，您可以在这里找到

但是，我将代码放在此处以提高可见性，由于其中存在其他元素，并且不想让任何人感到困惑，因此我尽了最大可能简化了代码。

我的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>

我的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;
}

Answer 1

它确实可以工作，但是颜色并没有真正实现，因为SVG的不透明度为0.4。

因此，将opacity: 1添加到#call SVG的活动状态。

#contact_Phone3_Wrapper_mb:active #call {
    fill: #262626;
    opacity: 1;
}

JSFiddle