css svg过滤器Safari不工作答案

【问题标题】：css svg filter safari not workingcss svg过滤器Safari不工作
【发布时间】：2018-09-24 03:51:15
【问题描述】：

我通过应用 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;
  }
}

【问题讨论】：

标签： css svg svg-filters

【解决方案1】：

您的语法完全正确，并且 Safari 遵循代码路径（如果您将 feColorMatrix 替换为 feFlood/blue，它将将该区域绘制为蓝色）。我认为发生的事情是 Safari 上的 SVG 过滤器的性能不是很好，所以我认为当某些事情变得过于紧张时，比如进行实时视频处理，它们就会被淘汰。如果您用图像替换视频 - 这很好用。

（我的（非常旧的）Mac 上的 FWIW，这在 Chrome/MacOS 上不起作用。）

【讨论】：

我已将此报告为 webkit 错误。 bugs.webkit.org/show_bug.cgi?id=184601
同样的问题，使用

【解决方案2】：

如果您对 css/scss 文件中的 svg 元素使用过滤器

过滤器：url(#filter_id);

将css/scss文件中的样式分别转成svg文件中的样式，一切正常，像这样：

<svg>
...
<g id="group_id">
..
</g>

<filter id="filter_id" x="5.54736" y="0" width={width-11.3} height="80.0002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood floodOpacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_326_868"/>
</filter>

<style>
{`
    #group_id {
         filter: url(#filter_id);
    }
`}
</style>
</svg>

【讨论】：