相关疑难解决方法(0)

我在object标签中包含了一个SVG图像文件,如下所示:

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

有问题的图像是一张世界地图,我想fill在鼠标悬停在a上时转换属性group,在这种情况下我按大陆分组我的SVG,所以南美看起来像这样:

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

我可以fill通过在SVG文档顶部使用以下CSS来使属性在悬停时更改:

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

但是我无法通过fillCSS过渡使颜色渐渐消失,颜色会立即改变,有人可以对此有所了解吗？

我想在 Instagram 徽标中添加颜色渐变，而不影响徽标的可见性。

超文本标记语言

<div class="wrapper">
      <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>
      <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>
      <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>

CSS

.wrapper {
  justify-content: center;
  align-items: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #3b5998
}
.wrapper a:nth-child(2) {
  color: #1DA1F2;
}
.wrapper a:nth-child(3) {
  color: black;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4); …

类似于css 中带有文本阴影的渐变文本，我想使用带有渐变的 Font Awesome 图标。

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>