css - 无法让我的 css 关键帧悬停投影动画在我的 svg 上工作

Question

我在 https://codepen.io/FelixRilling/pen/qzfoc 找到了 CSS 代码帮助我在我正在处理的元素的文本行上创建发光的悬停效果。我现在正尝试对整个 svg 文件执行相同的操作。我将“text-shadow”更改为“filter: drop-shadow”但是发光/阴影没有出现。我已经能够成功定位 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 函数每个函数只接受一个阴影声明。因此，您需要将所有文本阴影声明拆分为 filter 规则中尽可能多的 drop-shadow() 函数:

#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>