我正在尝试转换嵌入式SVG对象的填充和路径,但这似乎不起作用(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;
}
}
}
为什么填充动画不会悬停？
解决方法
转换不起作用的原因是因为它在链接中.
要修复它,请将链接放在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;
}
}
