Ich habe ein SVG ( http://www.feingeist.io/wp-content/uploads/2015/08/Polygon_grey.svg ), das ich umfärben möchte. Ursprünglich wollte ich dies mit der CSS-Funktion erreichen
background-blend-mode: luminosity;
background-color: #83b5da;
Leider wird dies von etlichen modernen Webbrowsern nicht unterstützt. Die obige CSS-Methode würde die Helligkeitsinformationen aus dem SVG und die Farbinformationen des CSS-Hintergrundparameters verwenden.
Da dies mit einigen Browsern nicht funktioniert, möchte ich zurückgreifen, indem ich die Farbüberlagerung bereits im SVG durchführe. Ich habe die Funktion „Bildmaterial neu einfärben“ bereits in Adobe Illustrator gefunden, aber irgendwie kann ich den gewünschten Effekt nicht erzielen. Das Endergebnis (inklusive Farbüberlagerung mit #83b5da) sollte so aussehen: http://www.feingeist.io/wp-content/uploads/2015/08/Header_Webseite_blau.jpg .
Alle Hinweise, wie das beschriebene Ziel erreicht werden kann, sind sehr willkommen.
HAFTUNGSAUSSCHLUSS: Dies ist nicht wirklich eine Antwort auf die Frage, eher ein alternativer Ansatz zu dem, was das OP bereits versucht hat.
Sie könnten einen CSS-Filter namens hue-rotate verwenden. Es funktioniert auf einer Skala zwischen 0 und 360 Grad. Es sieht in etwa so aus:
img {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
Ich würde vorschlagen, dass Sie damit herumspielen und sehen, was Sie erreichen können. Sie können Filter auch für andere Effekte kombinieren, wie folgt:
img {
-webkit-filter: sepia(1) hue-rotate(200deg);
filter: sepia(1) hue-rotate(200deg);
}
Die Browserunterstützung ist ziemlich gut, obwohl nicht alle Favoriten wie üblich mitspielen: siehe kann ich verwenden für weitere Informationen. Es gibt jedoch eine Polyfüllung , falls Sie sich für diesen Ansatz entscheiden und ältere Browser unterstützen müssen.
Um sich mit Filtern vertraut zu machen, empfehle ich diesen Artikel über CSS-Tricks , der meine Anlaufstelle ist, wenn ich jemals mein Gedächtnis auffrischen muss. Diese Website bietet einen eher visuellen Ansatz.
Da diese Frage zum Zeitpunkt, als ich dies schreibe, leider unter Linkfäule gelitten hat, belle ich möglicherweise den falschen Baum an, da ich das fragliche Kunstwerk nicht sehen kann.
Für mich klingt es jedoch so, als würden Sie nach der Funktion "Auswählen -> Gleich -> Füllen" suchen.
Wählen Sie mit dem DIREKT-Auswahlwerkzeug (um alle Gruppen in der SVG-Datei zu ignorieren) einen Pfad mit der Farbe aus, die Sie im gesamten Bildmaterial ändern möchten. "Gleiche Füllung auswählen" und dann die Farbe nach Bedarf anpassen. Spülen, wiederholen.
PS. Sie könnten stattdessen das „Texteditor-Äquivalent“ verwenden: Verwenden Sie Suchen-Ersetzen in der SVG-Datei selbst, aber das interaktive Vornehmen der Änderungen im Illustrator gibt Ihnen die Möglichkeit, „Ihr Auge zu benutzen“, und gibt Ihnen auch wertvolles, sofortiges Feedback.
Wie oben, könnte dies eine Option sein, die Sie ein wenig kostet, aber ein wunderbares und lohnendes Plug-In für Illustrator ist. Funktioniert besser als das in Illustrator integrierte „Recolor Artwork“. Prüfen Sie. Hoffe das hilft.
Benutzer9447