为啥这个 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 路径元素上。然后我将color
和transition
属性添加到周围的锚标记,并在锚标记而不是svg 路径本身上执行CSS 转换。下面是一个非常精简的例子:
html:
<a>
<svg>
<path fill="currentColor" />
</svg>
</a>
SCSS:
a color: black; transition: color .2s linear;
&:hover color: white;
【讨论】:
以上是关于为啥这个 CSS 转换在锚点内的 SVG 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章
我不明白为啥 CSS 转换在 keydown 上不起作用 [重复]