Question

此SVG有2个填充，一个为NONE，第二个为红色。当它没有悬停时，我该怎么办？当它悬停时会变成彩色？

按照现在的方式，它只会更改红色的

CELERY_ANNOTATIONS = {'module.mytask': {'time_limit': 20}}

   .icon{
      fill: red;
    transition: all 200ms ease-out;
    }

    .icon:hover{
      fill: blue;
    }

Answer 1

尝试添加包装器类，然后将ssg填充到svg路径中。这是示例代码。希望对您有帮助

.svg-wrapper svg path{
  fill: red;
transition: all 200ms ease-out;
}

.svg-wrapper svg path:hover{
  fill: blue;
}

<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22">
<path fill="none" d="M17.73,3c-3.26,0-5,3.47-5.73,5-.75-1.54-2.48-5-5.72-5A4.05,4.05,0,0,0,2,7.19c0,3.44,4.74,7.85,10,13,5.26-5.15,10-9.56,10-13A4.06,4.06,0,0,0,17.73,3Z" transform="translate(0 -1)" />
<path fill="#ff0000" d="M17.73,1A6.53,6.53,0,0,0,12,4.25,6.51,6.51,0,0,0,6.28,1,6,6,0,0,0,0,7.19C0,11.85,5.57,16.62,12,23c6.43-6.38,12-11.15,12-15.81A6,6,0,0,0,17.73,1ZM12,20.19C6.74,15,2,10.63,2,7.19A4.05,4.05,0,0,1,6.28,3c3.24,0,5,3.49,5.72,5,.75-1.55,2.47-5,5.73-5A4.06,4.06,0,0,1,22,7.19C22,10.63,17.26,15,12,20.19Z" transform="translate(0 -1)"/>
</svg>
</div>

Answer 2

您可以使用SVG标签对其进行动画处理。以下是如何在正方形上悬停效果来来回动fill属性的动画：

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100" fill='#000000'>
    <animate attributeType="XML" attributeName="fill" from="#000000" to="#ff0000"
        dur="0.5s" repeatCount="1" begin='mouseover' fill='freeze'/>
    <animate attributeType="XML" attributeName="fill" from="#ff0000" to="#000000"
        dur="0.5s" repeatCount="1" begin='mouseout' fill='freeze'/>
  </rect>
</svg>

将此SVG放置在页面上时，将鼠标悬停在该页面上时会变成红色，展开时会变回黑色。

悬停时将SVG fill =“ none”更改为fill =“＃FFF”？

2 个答案: