为什么'；这个CSS转换不能在一个锚内的SVG上工作

我正在尝试转换嵌入式SVG对象的填充和路径，但是这似乎不起作用（代码笔）：

SVG:

<a class="simple-link svg-link" href="">
  Some Text
  <svg version="1.1" id="next-page-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
    <circle class="the-background" cx="12.5" cy="12.5" r="12.5"/>
    <g>
      <path class="the-icon"  d="M16.088,11.421l-3.404,3.362l-3.418-3.362v-1.204l3.418,3.444l3.404-3.444V11.421z"/>
     </g>
  </svg>
</a>

a
{
  width:200px;
  height:200px;
  overflow: hidden;

  @include transition(color, 1s);
  @include transition(background, 1s);

  svg
  {
    width:200px;
    height:200px;

    .the-background
    {
      @include transition(fill, 1s);
      fill: grey;
    }

    .the-icon
    {
      @include transition(fill, 2.5s);
    }
  }

  &:hover
  {
    color: red;
    background: black;
    .the-background
    {
      fill: black;
    }

    .the-icon
    {
      fill: red;
    } 

  }
}

---

为什么填充不在悬停时设置动画？

转换不起作用的原因是它位于链接内

要修复它，请将链接放在SVG内部

或

使SVG成为链接的同级并使用同级选择器

/* This goes within `a { ...` */
&:hover + svg { /* Or use ~ to select all */
  .the-background
  {
    fill: black;
  }

  .the-icon
  {
    fill: red;
  } 
}

---

我刚刚发现，为了在锚元素中转换svg填充，它只能使用rgba颜色代码。我还没有研究为什么会这样，但它正在我的项目中发挥作用——这里有一个例子：（悬停在社交媒体图标上）

以下是我正在使用的SASS：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: rgba(0,0,0,.2);
  -webkit-transition: fill .5s;
  -moz-transition: fill .5s;
  -ms-transition: fill .5s;
  -o-transition: fill .5s;
  transition: fill .5s;

  &:hover {
    fill: rgba(0,0,0,.5);
  }
}

---

我解决这个问题的方法是将

fill=“currentColor”

放在我想要转换的svg路径元素上。然后我向周围的锚标记添加了

color

和

transition

属性，并对锚标记而不是svg路径本身执行CSS转换。下面是一个非常简单的例子：

HTML:

---

我刚刚试过这个，它似乎只适用于不透明度。使用不同的颜色仍然无法使用此方法进行转换。此解决方案肯定适用于颜色状态之间的转换。谢谢你发布这个！谢谢,谢谢!！在Safari工作，不像我尝试过的其他事情。

<a>
    <svg>
        <path fill="currentColor" />
    </svg>
</a>

a { color: black; transition: color .2s linear;
    &:hover { color: white; } }