为什么这个 CSS 转换在锚点内的 SVG 上不起作用答案

【问题标题】：Why Doesn't This CSS Transition Work On SVG Inside an Anchor为什么这个 CSS 转换在锚点内的 SVG 上不起作用
【发布时间】：2014-04-30 21:26:51
【问题描述】：

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

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

  }
}

为什么悬停时填充没有动画效果？

【问题讨论】：

标签： css svg hover anchor transition

【解决方案1】：

过渡不起作用的原因是它在链接内。

要修复它，请将链接放在 SVG 中而不是 like this SO post suggests

或

使 SVG 成为链接的兄弟并使用兄弟选择器

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

  .the-icon
  {
    fill: red;
  } 
}

【讨论】：

谢谢，谢谢！在 Safari 中工作，与我尝试过的其他事情不同。

【解决方案2】：

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

这是我正在使用的 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);
  }
}

【讨论】：

我刚试过这个，它似乎只适用于不透明度。使用这种方法，使用不同的颜色仍然不会过渡。
这个解决方案绝对适用于颜色状态之间的转换。感谢您发布此消息！

【解决方案3】：

我解决这个问题的方法是将fill="currentColor" 放在我想要转换的svg 路径元素上。然后我将color 和transition 属性添加到周围的锚标记，并在锚标记而不是svg 路径本身上执行CSS 转换。下面是一个非常精简的例子：

HTML：

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

SCSS：

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

【讨论】：