将 photoshop 调整图层转换为 SVG 滤镜-解网

问：

我正在尝试将 Photoshop 调整图层复制到 SVG 滤镜中。
我需要将图像从

以下是 Photoshop 中用于创建转换后图像的 2 个调整图层：

我需要在许多图像的悬停上添加此效果。我尝试使用 svg feColorMatrix 复制效果，但我无法找出正确的颜色矩阵来应用转换。
这是我尝试过的代码（将鼠标悬停在图像上以查看svg滤镜效果）：

img {
  width: 500px;
  height: auto;
}
img:hover {
  filter: url(#colorTransform);         
}

<img src="https://i.stack.imgur.com/iQZuF.jpg" />

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="colorTransform">
    <feColorMatrix type="matrix" 
      values="
          1.21 0.00 0.00 0.00  0.00
          0.00 1.47 0.00 0.00  0.00
          0.00 0.00 0.70 0.00  0.00
          0.00 0.00 0.00 1.00  0.00">
     </feColorMatrix>
   </filter>
</svg>

我试图在 R、G 和 B 通道中以相同的值复制上面代码中的一层，但这不起作用。

有没有办法从目标图像和原始图像生成颜色矩阵？有没有办法从调整图层值计算颜色矩阵？

CSS SVG 矩阵颜色 Photoshop

您必须将 color-interpolation-filters=“sRGB” 添加到您的过滤器元素中，以便将过滤器设置为“正常”颜色空间 - 否则它会是 linearRGB.，如果您想要整体 -24%，那么您应该将第五列设置为 -0.24 -0.24 -0.24 0.0。色彩平衡调整将使用 feColorMatrix 中的非对角线设置。您可能只想玩 feColorMatrix playground 以查看最接近的：例如 codepen.io/mullany/pen/DmEYLg

0赞 web-tiki 11/14/2023

@MichaelMullany感谢您提供的信息，我将根据您的评论和下面的答案进行一些测试，以尝试找到一种比猜测矩阵值更强大的方法。

答：

3赞 Ghoul Fool 11/13/2023 #1

这不是一个完整的答案，但可能会有所帮助。我认为没有将调整图层转换为 SVG 颜色矩阵的现有方法。

然而。。。您可以查看调整图层对单个颜色的作用，并相应地创建矩阵

以前

后

将 photoshop 调整图层转换为 SVG 滤镜

Convert photoshop adjustement layer to SVG filter

评论

评论