Question

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

我通过以下方式将此外部SVG包含在我自己的SVG中：

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

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

过滤器：invert（100％）;
将外部SVG设置为具有不同组合填充颜色的矩形的遮罩

有什么想法吗？

Answer 1

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

您还需要考虑的一件事是，如果您有一个定义路径的简单图标文件（默认情况下为黑色），则默认背景为透明的 black 。因此，适用于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>

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

1 个答案: