Инвертировать / изменить цвет заливки встроенного SVG в SVG - PullRequest
Новая
       11

Инвертировать / изменить цвет заливки встроенного SVG в SVG

0 голосов
/ 04 июля 2018

У меня есть значок во внешнем SVG-файле, который я не могу редактировать. Это черно-белое.

Я включаю этот внешний SVG в свой собственный SVG через 

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

Теперь мне нужно инвертировать «цвета» внешнего SVG (то есть сделать белый черный, а черный белый). Мое предположение было, что это, безусловно, должно быть возможно с использованием чистого SVG. Я попробовал:

  • фильтр: инвертированный (100%);
  • Настройка внешнего SVG в качестве маски для прямоугольника с цветом заливки в различных комбинациях

Есть идеи?

1 Ответ

0 голосов
/ 04 июля 2018

CSS-фильтры могут быть выражены через SVG-фильтры; здесь - список.

Кроме того, вам следует учесть, что если у вас есть простой файл значков, определяющий путь (по умолчанию он закрашен черным), фон по умолчанию будет прозрачным черный . Поэтому фильтр, работающий на каналах 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>
...