Question

我在https://codepen.io/FelixRilling/pen/qzfoc找到了CSS代码，以帮助我在正在处理的项目的文本行上创建发光的悬停效果。我现在正在尝试对整个svg文件执行相同的效果。我将“文本阴影”更改为“过滤器：阴影”，但未显示辉光/阴影。我已经能够成功定位svg（使用基本的填充悬停效果）。我想知道是否可以在svg上播放此动画，以及我的问题是否与@keyframes语法有关。有谁知道我该如何调整才能使其在svg上正常工作？谢谢！

CSS


#ring {
    width: 15rem;
    height: auto;
    fill: rgb(92, 92, 92);
    padding-top: 5rem;

    text-decoration: none;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s;
}

#ring:hover {
    -webkit-animation: neon4 1s ease-in-out infinite alternate;
    -moz-animation: neon4 1s ease-in-out infinite alternate;
    animation: neon4 1s ease-in-out infinite alternate;
    fill: rgba(255, 249, 216, 0.988);
  }

/*-- Glow Animation --*/
@keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

  /*-- Glow for Webkit --*/
  @-webkit-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }   
  /*-- Glow for Mozilla --*/
  @-moz-keyframes neon4 {
    from {
        filter: drop-shadow(0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(252, 226, 32), 0 0 70px rgb(252, 226, 32), 0 0 80px rgb(252, 226, 32), 0 0 100px rgb(252, 226, 32), 0 0 150px rgb(252, 226, 32));
    }
    to {
        filter: drop-shadow(0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(252, 226, 32), 0 0 35px rgb(252, 226, 32), 0 0 40px rgb(252, 226, 32), 0 0 50px rgb(252, 226, 32), 0 0 75px rgb(252, 226, 32));
    }
  }

嵌入式SVG


<svg version="1.0" xmlns="http://www.w3.org/2000/svg" id= "ring"
                        viewBox="0 0 1503.000000 1584.000000"
                        preserveAspectRatio="xMidYMid meet">

                        <g transform="translate(0.000000,1584.000000) scale(0.100000,-0.100000)"
                        fill="#000000" stroke="none">
                            <path id="ring" d="M6809 14732... 53z"/>
                        </g>
                    </svg>

插入所需的任何svg，我的文件太大，无法在此处发布。这是我正在使用的文件：http://svgur.com/s/3wu

谢谢！

Answer 1

问题在于您的阴影函数声明。 text-shadow允许将多个阴影作为单个规则应用，并用逗号,分隔。但是，drop-shadow函数每个函数仅接受一个阴影声明。因此，您需要在drop-shadow()规则中将所有文本阴影声明拆分为多个filter函数：

#ring:hover {
  animation: neon4 1s ease-in-out infinite alternate;
}
@keyframes neon4 {
  from {
      filter: drop-shadow(0 0 10px #fff)drop-shadow( 0 0 20px #fff)drop-shadow( 0 0 30px #fff)drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 70px rgb(252, 226, 32))drop-shadow( 0 0 80px rgb(252, 226, 32))drop-shadow( 0 0 100px rgb(252, 226, 32))drop-shadow( 0 0 150px rgb(252, 226, 32));;
  }
  to {
      filter: drop-shadow(0 0 5px #fff)drop-shadow( 0 0 10px #fff)drop-shadow( 0 0 15px #fff)drop-shadow( 0 0 20px rgb(252, 226, 32))drop-shadow( 0 0 35px rgb(252, 226, 32))drop-shadow( 0 0 40px rgb(252, 226, 32))drop-shadow( 0 0 50px rgb(252, 226, 32))drop-shadow( 0 0 75px rgb(252, 226, 32));
  }
}

<svg id="ring" width="84" height="84">
  <rect stroke="black" fill="none" x="2" y="2" width="80" height="80"/>
</svg>

无法让我的CSS关键帧悬停下拉动画在我的SVG上正常工作

1 个答案: