反转/更改 SVG 中嵌入 SVG 的填充颜色

Question

我在无法编辑的外部 svg 文件中有一个图标。它是黑白的。

我通过

将这个外部 SVG 包含在我自己的 SVG 中

<image x="1mm" y="1mm" width="7mm" height="7mm" xlink:href="myExternal.svg" />

现在我需要反转外部 SVG 的“颜色”（即，使白色变为黑色和黑色变为白色）。我的假设是，使用纯 SVG 肯定可以做到这一点。我试过了：

• 过滤器：反转（100%）；
• 将外部 SVG 设置为具有不同组合填充颜色的矩形的蒙版

有什么想法吗？

Answer 1

CSS 过滤器可以用 SVG 过滤器来表示； here 是一个列表。

您需要另外考虑的一件事是，如果您有一个简单的图标文件定义路径（默认情况下填充为黑色），则默认背景为透明黑色。因此，适用于 RGB 通道的过滤器不会看到路径与其背景之间的对比。

（对于以下示例，我将图像作为数据 uri 而不是外部图像插入。）

这种图标的简单解决方案是反转不透明度：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <defs id="defs6">
    <filter filterUnits="objectBoundingBox" id="invert" x="0" y="0" height="1" width="1">
      <feComponentTransfer>
          <feFuncA type="table" tableValues="1 0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image filter="url(#invert)" xlink:href='data:image/svg+xml,%3c?xml version="1.0" encoding="UTF-8" standalone="no"?>%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">%3cpath d="M 425.403,330.939 C 408.414,314.154 390.857,296.796 390.857,214.856 390.857,131.83 329.899,62.782 250.39,50.094 A 31.843,31.843 0 0 0 256,32 C 256,14.327 241.673,0 224,0 206.327,0 192,14.327 192,32 A 31.848,31.848 0 0 0 197.609,50.095 C 118.101,62.783 57.143,131.831 57.143,214.857 57.143,296.79 39.592,314.149 22.6,330.935 -25.496,378.441 9.726,448 66.919,448 H 160 C 160,483.346 188.654,512 224,512 259.346,512 288,483.346 288,448 H 381.08 C 438.27,448 473.495,378.417 425.403,330.939 Z M 224,472 C 210.766,472 200,461.234 200,448 H 248 C 248,461.234 237.234,472 224,472 Z M 381.092,400 H 66.9 C 50.138,400 41.765,379.61 53.566,367.809 82.151,339.224 105.143,312.085 105.143,214.857 105.143,149.319 158.462,96 224,96 289.538,96 342.857,149.319 342.857,214.857 342.857,312.507 366.078,339.431 394.425,367.809 406.278,379.661 397.783,400 381.092,400 Z" />%3c/svg>' y="50" x="50" height="100" width="100" />
</svg>

要获得更完整的解决方案，您可以在图像后面放置一个白色填充，然后反转所有颜色：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <defs id="defs6">
    <filter filterUnits="objectBoundingBox" id="invert" x="0" y="0" height="1" width="1">
      <feFlood flood-color="rgb(255,255,255)" result="background" />
      <feBlend mode="normal" in="SourceGraphic" in2="background" />
      <feComponentTransfer>
          <feFuncR type="table" tableValues="1 0"/>
          <feFuncG type="table" tableValues="1 0"/>
          <feFuncB type="table" tableValues="1 0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image filter="url(#invert)" xlink:href='data:image/svg+xml,%3c?xml version="1.0" encoding="UTF-8" standalone="no"?>%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">%3cpath d="M 425.403,330.939 C 408.414,314.154 390.857,296.796 390.857,214.856 390.857,131.83 329.899,62.782 250.39,50.094 A 31.843,31.843 0 0 0 256,32 C 256,14.327 241.673,0 224,0 206.327,0 192,14.327 192,32 A 31.848,31.848 0 0 0 197.609,50.095 C 118.101,62.783 57.143,131.831 57.143,214.857 57.143,296.79 39.592,314.149 22.6,330.935 -25.496,378.441 9.726,448 66.919,448 H 160 C 160,483.346 188.654,512 224,512 259.346,512 288,483.346 288,448 H 381.08 C 438.27,448 473.495,378.417 425.403,330.939 Z M 224,472 C 210.766,472 200,461.234 200,448 H 248 C 248,461.234 237.234,472 224,472 Z M 381.092,400 H 66.9 C 50.138,400 41.765,379.61 53.566,367.809 82.151,339.224 105.143,312.085 105.143,214.857 105.143,149.319 158.462,96 224,96 289.538,96 342.857,149.319 342.857,214.857 342.857,312.507 366.078,339.431 394.425,367.809 406.278,379.661 397.783,400 381.092,400 Z" />%3c/svg>' y="50" x="50" height="100" width="100" />
</svg>