时间戳

首页 > 解决方案 > 如何在处理过程中为 svg 着色并保持亮度？

svg - 如何在处理过程中为 svg 着色并保持亮度？

问题描述

我已经尝试解决这个问题两天了，所以我希望有人可以提供帮助。

我需要加载其中包含多个灰色值的 svg 文件并用颜色对其进行着色。例如，假设 svg 文件是一块岩石的图像，并且有 4 个灰度值。我需要能够将岩石显示为红色并保持不同子形状中值之间的差异。换句话说，我希望它像 PImage.tint() 一样工作。

我看到 PShape 有 tint() 和 setTint() 方法，但我似乎无法让它们工作。我也考虑过遍历子形状并单独阅读每种颜色并适当地重新着色，但我什至无法弄清楚如何以我理解的方式读出颜色。

帮助，有人吗？

标签： svgprocessing

解决方案

如果你有它，<img>你可以使用 CSS 过滤器属性和 hue-rotate https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate

或者您将 svg 直接添加到 html 并将类添加到您的元素。然后您可以更改脚本中的颜色。

推荐阅读