Why Doesn#39;t This CSS Transition Work On SVG Inside an Anchor(为什么这个 CSS 转换在锚点内的 SVG 上不起作用)
问题描述
我正在尝试转换嵌入式 SVG 对象的填充和路径,但这似乎不起作用(代码笔 这里):
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>
萨斯:
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 中,而不是 like这个 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 上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为什么这个 CSS 转换在锚点内的 SVG 上不起作用
基础教程推荐
- 响应更改 div 大小保持纵横比 2022-01-01
- 动态更新多个选择框 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01