代码之家 › 专栏 › 技术社区 › James Wood

为什么SVG过滤器动画在Edge或Chrome中不起作用[[副本]

microsoft-edge css-animations svg google-chrome html

James Wood · 技术社区 · 6 年前

@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(-360deg);
  }
}

.hex {
    fill-opacity: 1.0;
    animation: hue 5s infinite linear;
}

<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <polygon class="hex" points="0,0 300,0 300,300 0,300" fill="red"></polygon>
  
</svg>

在Firefox 62中,这是可行的。

在边17和铬69中,我看到一个红色的矩形。

1 回复 | 直到 6 年前

Waruyama 6 年前

作为 @凯伊多 评论中提到,Chrome/Edge目前不支持单个SVG元素上的CSS过滤器,但是将过滤器应用到整个SVG可以在两种浏览器上工作,如您在本例中所见:

@keyframes hue {
  from {
    filter: hue-rotate(50deg);
  }

  to {
    filter: hue-rotate(-360deg);
  }
}

.hex {
    fill-opacity: 1.0;
    animation: hue 5s infinite linear;
    filter: hue-rotate(50deg);
}

<svg class="hex" id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <polygon points="0,0 300,0 300,300 0,300" fill="red"></polygon>
  
</svg>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前