为什么这个CSS转换工作在SVG内部的锚点 [英] Why Doesn't This CSS Transition Work On SVG Inside an Anchor

问题描述

我试图转换嵌入的SVG对象的填充和路径，但是这似乎不工作（代码笔 here ）：

I'm trying to transition the fill and path of an embedded SVG object, however this doesn't seem to work (Code Pen 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>

Sass：

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

  }
}

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

推荐答案

转换不起作用的原因是因为它在链接内。

The reason why the transition doesn't work is because it is within a link.

要解决这个问题，请将链接放在SVG内部喜欢这个SO职位建议

To fix it, put the link inside of the SVG instead like this SO post suggests

或

将SVG作为链接的兄弟节点并使用同级选择器

Make the SVG a sibling of the link and use the sibling selector

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

  .the-icon
  {
    fill: red;
  } 
}

这篇关于为什么这个CSS转换工作在SVG内部的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！