为啥这个 CSS 转换在锚点内的 SVG 上不起作用

Posted

技术标签:

【中文标题】为啥这个 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;
     

  

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

【问题讨论】:

【参考方案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 路径元素上。然后我将colortransition 属性添加到周围的锚标记,并在锚标记而不是svg 路径本身上执行CSS 转换。下面是一个非常精简的例子:

html

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

SCSS:

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

【讨论】:

以上是关于为啥这个 CSS 转换在锚点内的 SVG 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 锚点内的输入框中没有文本选择

将按钮放在锚点内有啥缺点吗?

我不明白为啥 CSS 转换在 keydown 上不起作用 [重复]

CSS - 剪辑路径 svg 在 Firefox 上不起作用

:在锚点上悬停过渡

为啥外部链接在构建后在 phonegap 应用程序上不起作用