如何应用 SVG 过滤器来创建整个轮廓的彩色 SVG 形式？

Question

我在 pgn 中有一张图片，例如棋子（白王）

是否有一种简单的方法可以将 SVG 滤镜应用于此图像以获得包含相同形状（剪影（轮廓）并填充一种颜色（例如红色）的 SVG？

Answer 1

如果您的图像有白色填充和外部透明，那么是的，您可以使用 SVG 滤镜来做到这一点。

img {
  filter: url(#colorise);
}

<svg width="0" height="0" style="position: absolute">
  <defs>
    <filter id="colorise">
      <!-- Fill the filter area with red -->
      <feFlood flood-color="red" result="colour"/>
      <!-- Trim the red to just what's "in" (inside) the image (ie non-transparent) -->
      <feComposite operator="in" in="colour" in2="SourceGraphic"/>
      <!-- Multiply the trimmed red shape with the original image. Black parts stay black. White parts become red. -->
      <feBlend mode="multiply" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img src="https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/wK.png"/>

更新

如何让整个东西变成红色，包括黑色部分。

img {
  filter: url(#colorise);
}

<svg width="0" height="0" style="position: absolute">
  <defs>
    <filter id="colorise">
      <!-- Fill the filter area with red -->
      <feFlood flood-color="red" result="colour"/>
      <!-- Trim the red to just what's "in" (inside) the image (ie non-transparent) -->
      <feComposite operator="in" in="colour" in2="SourceAlpha"/>
    </filter>
  </defs>
</svg>

<img src="https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/wK.png"/>

如何应用 SVG 过滤器来创建整个轮廓的彩色 SVG 形式？

How to apply SVG filter(s) to create a colored SVG form of the whole silhouette?

svg

svg-filters