Question

我通过应用svg feColorMatrix来使用css过滤器属性。它适用于Firefox和Chrome。但它不适用于野生动物园。我一直在玩值，缩进，供应商前缀，并且无法在safari中成功应用我的过滤器。

任何人都可以帮我确定为什么我的过滤器在Safari中不起作用？

您可以在此处查看演示 https://codepen.io/Fallenstedt/pen/OvYGjV

我的svg过滤器和视频元素：

<svg class="defs-only">
  <filter
    id="blue-tint"
    color-interpolation-filters="sRGB"
    x="0"
    y="0"
    height="100%"
    width="100%">
    <feColorMatrix
      type="matrix" 
      values="0 0 0 0 0
              0.75 0 0 0 0
              1.265 0 0 0 0
              0 0 0 1 0
              "/>
  </filter>
</svg>

<div class="background-vid">
  <video id="video"
    class="lazy"
    autoplay
    loop
    muted>
    <source src="https://storage.googleapis.com/coverr-main/mp4/Cloud_Surf.mp4" type="video/mp4">
  </video>
</div>

我的scss：

html, body {
  margin: 0;
  padding: 0;
}
.defs-only {
  position: absolute;
  height: 0;
  width: 0;
  overflow: none;
  left: -100%;
}

.background-vid {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  -webkit-filter: grayscale(100%) url(#blue-tint);
  filter: grayscale(100%) url(#blue-tint);
  video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

Answer 1

你的语法是正确的，Safari正在遵循代码路径（如果用feFlood / blue替换feColorMatrix，它会将区域描绘成蓝色）。我认为正在发生的事情是Safari上的SVG过滤器效率不高，所以我认为当像实时视频处理那样压力过大时，它们会发挥作用。如果用图像替换视频 - 这很好用。

（我的（很老）Mac上的FWIW，这对Chrome / MacOS不起作用。）

css svg过滤器safari无法正常工作

1 个答案: