Question

我正在使用svg图标作为位置按钮。我已在按钮上应用悬停转换。

除了IE之外，它在Chrome，Firefox，Safari中运行良好。

svg图标中的悬停效果似乎与整个按钮分开。任何人都知道如何解决这个问题？

HTML：

<a href="#" class="locationbtn">
  <span class="locationbtn-txt">Location</span>
  <span class="locationbtn-icon">
                <svg width="22" height="28" viewBox="490.275 224.782 21.917 28.833">
                        <g id="icon-location" stroke="#FFF" stroke-miterlimit="10"><path fill="#FFF" d="M501.233 252.398c-.12 0-.235-.052-.312-.143-.395-.46-9.687-11.302-9.687-16.535 0-5.36 4.485-9.723 10-9.723s10 4.36 10 9.723c0 5.234-9.29 16.076-9.687 16.536-.078.09-.193.142-.313.142zm0-25.604c-5.063 0-9.182 4.004-9.182 8.927 0 4.43 7.538 13.69 9.183 15.654 1.644-1.967 9.183-11.225 9.183-15.653-.002-4.922-4.12-8.926-9.183-8.926z"/><ellipse fill="none" stroke-width="2" cx="501.233" cy="236.003" rx="4.387" ry="4.264"/></g>
        </svg>
        </span>
</a>

CSS：

.locationbtn {
  width:140px;
  color:#fff;
  background: #555;
  padding: 10px 20px;
  display: block;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.locationbtn-txt {
  display: inline-block;
  margin-right: 0.6em;
  margin-top: 0.2em;
  font-size: 1.4em;
}

.locationbtn-icon {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 28px;
}

.locationbtn:hover {
  background: #000;
  color: yellow;
}

a svg #icon-location {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.locationbtn:hover #icon-location {
  stroke: yellow;
}

链接：http://codepen.io/rae0724/pen/GNbYjO

Answer 1

您可以尝试在路径笔划中使用currentColor关键字，然后只运行一个转换...（我无法测试这个，因为我没有IE可用）

＆＃13;

.locationbtn {
  width: 140px;
  color: #fff;
  background: #555;
  padding: 10px 20px;
  display: block;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.locationbtn-txt {
  display: inline-block;
  margin-right: 0.6em;
  margin-top: 0.2em;
  font-size: 1.4em;
}
.locationbtn-icon {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 28px;
}
.locationbtn:hover {
  background: #000;
  color: yellow;
}

＆＃13;

<a href="#" class="locationbtn">
  <span class="locationbtn-txt">Location</span>
  <span class="locationbtn-icon">
                <svg width="22" height="28" viewBox="490.275 224.782 21.917 28.833">
                        <g id="icon-location" stroke="currentColor" stroke-miterlimit="10"><path fill="currentColor" d="M501.233 252.398c-.12 0-.235-.052-.312-.143-.395-.46-9.687-11.302-9.687-16.535 0-5.36 4.485-9.723 10-9.723s10 4.36 10 9.723c0 5.234-9.29 16.076-9.687 16.536-.078.09-.193.142-.313.142zm0-25.604c-5.063 0-9.182 4.004-9.182 8.927 0 4.43 7.538 13.69 9.183 15.654 1.644-1.967 9.183-11.225 9.183-15.653-.002-4.922-4.12-8.926-9.183-8.926z"/><ellipse fill="none" stroke-width="2" cx="501.233" cy="236.003" rx="4.387" ry="4.264"/></g>
        </svg>
        </span>
</a>

＆＃13;

CSS后台悬停转换与IE中的svg悬停转换不同步

1 个答案: