如何仅使用 SVG 自动增亮 SVG 节点？

Question

我希望能够指定某种变换，在给定任意 SVG 节点的情况下，重新映射其所有像素值以覆盖整个（0-100% 或 0-255）强度范围，同时避免剪辑。

带有 feFuncX 线性映射函数的 feComponentTransfer 过滤器几乎提供了我想要的东西，但似乎缺乏引用输入节点的全局最大强度的能力，是否有一些巧妙的解决方法？

Answer 1

没有“auto-brighten”功能可以满足您的需求。

您必须自己用 javascript 阅读所有颜色并计算出适当的 brighten/saturate 值。

但作为 good-enough 方法，值为 200% 的饱和过滤器可能会得到接近您想要的东西。

svg rect:hover {
  filter: saturate(200%);
}

<svg>
  <rect width="50%" height="100%" fill="cadetblue"/>
  <rect x="50%" width="50%" height="100%" fill="cornsilk"/>
</svg>

How to auto-brighten an SVG node using SVG only?