Ersetzen Sie eine Farbe mit SVG-Filtern

Question

Ist es möglich, ein IMG-Bild zu machen und eine exakte Farbe zu einer anderen zu ersetzen, sagen wir #fff zu # 000, behalten alle anderen Farben unverändert? Wahrscheinlich kann die Farbmatrix von SVG-Filtern helfen?

Answer 1

So etwas wie CSS background-blend-mode: exclusion;? Sah es here.

Keine Antwort, aber ich habe nicht genug Ruf zu kommentieren.

Answer 2

Dies ist mit Canvas trivial. Es ist auch möglich, mit SVG zu tun, aber es ist verschachtelt. Die folgende Methode funktioniert mit herkömmlichen vollständig opaken Bildern. Zuerst konvertieren Sie jeden nicht übereinstimmenden Farbwert in jedem Kanal auf Null und jeden übereinstimmenden Farbwert auf 1, indem Sie einen langen ComponentTransfer verwenden (der Index der einzigen "1" in Ihren 256 Mitglieds-tableValues-Arrays sollte mit Ihrem r-, g- und b-Ersatz übereinstimmen) Wert). Dann zerschnellst du das Alpha von allem außer den resultierenden weißen Pixeln unter Verwendung einer Farbmatrix. Sie verwenden das Ergebnis als Maske mit einem FeFlood Ihrer Zielfarbe und fügen das Ergebnis über Ihrer ursprünglichen Grafik zusammen. Zum Beispiel - der folgende Code ersetzt eine bestimmte Farbe - rgb (87, 78, 29) mit rot.

<svg width="800px" height="600px" viewBox="0 0 800 600"> 
 
     <defs> 
 
     <filter id="color-replace" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
 
    
 
     <!--Replace rgb(87,78,29) with red--> 
 
     <feComponentTransfer> 
 
      <feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
      <feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
      <feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/> 
 
     </feComponentTransfer> 
 
     
 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
 
              0 1 0 0 0 
 
              0 0 1 0 0 
 
              1 1 1 1 -3" result="selectedColor"/> 
 
     
 
      <feFlood flood-color="red"/> 
 
      <feComposite operator="in" in2="selectedColor"/> 
 
      <feComposite operator="over" in2="SourceGraphic"/> 
 
     </filter> 
 
     </defs> 
 
    <g filter="url(#color-replace)"> 
 
     <rect x="50" y="50" height="100" width="100" fill="rgb(86,77,28)"/> 
 
     <rect x="250" y="50" height="100" width="100" fill="rgb(86,77,29)"/> 
 
     <rect x="450" y="50" height="100" width="100" fill="rgb(86,78,29)"/> 
 
     <rect x="50" y="250" height="100" width="100" fill="rgb(87,77,29)"/> 
 
     <rect x="250" y="250" height="100" width="100" fill="rgb(87,78,29)"/> 
 
     <rect x="450" y="250" height="100" width="100" fill="rgb(87,78,30)"/> 
 
     <rect x="50" y="450" height="100" width="100" fill="rgb(88,78,30)"/> 
 
     <rect x="250" y="450" height="100" width="100" fill="rgb(88,79,29)"/> 
 
      <rect x="450" y="450" height="100" width="100" fill="rgb(88,79,30)"/> 
 
     </g> 
 
    </svg>