Question

我正在尝试使用CSS将SVG过滤器feConvolveMatrix应用于图像。这很好。但是，在Safari中（在Retina显示屏上）应用滤镜时，效果不佳。

使用下面的代码段，将鼠标悬停在图像上可使图像变清晰。在Chrome和Firefox中，这具有理想的效果。在我的外接显示器（低PPI）和MacBook Pro Retina显示器（高PPI）上。在Safari中，它确实对我的外接显示器有理想的效果，但在使用Retina显示器时却没有。

我是在做错什么还是Safari中的错误？我在Google上运气不好，因此很感激。

注意：我正在使用随机的Unsplash图片。重新运行该代码段以获得更好的图像主题。推荐整页。

#img-subject:hover {
  filter: url(#sharpen);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG feConvolveMatrix filter</title>
</head>
<body>
  <div>
    <img id="img-subject" src="https://source.unsplash.com/random" /> 
    <svg>
      <filter id="sharpen">
        <feConvolveMatrix order="3" preserveAlpha="true" kernelMatrix="-1 0 0 0 4 0 0 0 -1"/>
      </filter>
    </svg>
  </div>
</body>
</html>

使用CSS应用SVG过滤器（feConvolveMatrix）来锐化图像

0 个答案: