Ich suche Rat bei der Arbeit mit SVG-Filtern - genauer gesagt multiplizieren

Ich habe ein Referenzbild des Effekts, den ich mit SVG erzielen möchte.

Bitmap-Referenzbild

In Photoshop kann der Effekt erzielt werden, indem 100 % Deckkraft verwendet wird, wobei der Mischmodus auf „Multiplizieren“ eingestellt ist.

Die Farben haben Hex-Werte von:

Rot: #EA312F, Blau: #3A5BA6 und Überlappungsbereich: #35111F

Ich habe eine Reihe von Ansätzen mit SVG-Filtern ausprobiert, um einen ähnlichen Effekt zu erzielen, aber ich habe Schwierigkeiten zu verstehen, wie die Mischmodi die Werte berechnen.

SVG versucht, mit der Originalgrafik übereinzustimmen

  1. Ursprüngliche Photoshop-Bitmap
  2. SVG verwendet nur Formen, keine Filter
  3. SVG mit Multiplikationsfilter auf vertikalem Balken
  4. SVG mit Multiplikationsfilter und Deckkraft auf vertikalem Balken

Sie können den SVG-Code für jeden dieser Codes in dieser JSBin http://jsbin.com/iPePuvoD/1/edit sehen

Ich habe wirklich Mühe, den besten Ansatz zu verstehen, um das Blau des vertikalen Balkens und die Farbe des überlappenden Bereichs anzupassen.

Jede dieser Formen möchte ich auch mit einer Bibliothek wie http://snapsvg.io/ animieren , also hoffe ich, mich nur auf Filter zu verlassen, anstatt auf Zuschneiden oder andere Operationen, um die gewünschten Ergebnisse zu erzielen - aber ich bin es offen für Vorschläge.

Das SVG für den letzten Versuch (4.) lautet effektiv:

<svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feBlend in="SourceGraphic" mode="multiply"/>
      <feBlend in="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <g id="f_shape">
    <rect x="0" y="0" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" />
  </g>
</svg>

Würde mich sehr über einige Ratschläge dazu freuen, ich habe einige gute Ressourcen zu SVG gefunden, aber in diesem Bereich scheint es immer noch ziemlich schwierig zu sein, gute Informationen zu bekommen.

Danke!

Antworten (2)

Leider können Sie mit den Mischmodi von Photoshop viele coole Dinge tun, die Sie an anderen Orten einfach nicht tun können, wie z. B. CSS, SVG-Grafiken usw. Im Allgemeinen werden Sie feststellen, dass der fantastische Multiplikationsmodus Sie am meisten beißt Situationen.

Ist das gezeigte Kunstwerk die eigentliche Frage? Sofern SVG nicht das Konzept des „Überdruckens“ hat (was „multiplizieren“ ist), denke ich, dass Sie das Bildmaterial in ein zusätzliches Stück zerschneiden und den überlappten Abschnitt manuell einfärben müssen.

Sie können auch mehrere Ebenen ausprobieren, beispielsweise den roten Balken. Legen Sie eines ganz unten auf den Stapel, ohne Folien oder Effekte. Dann auf den blauen stapeln. Stapeln Sie dann ein weiteres rotes auf und spielen Sie mit den Transparenzeinstellungen auf dem oberen roten herum. Mit dem vollständig "undurchsichtigen" roten Balken unten im Stapel sollten die Änderungen, die Sie am oberen roten Balken vornehmen, nur den Bereich betreffen, in dem der blaue Balken interagiert.

Ich weiß nicht genau, welche Unterstützung SVG-Mischmodi derzeit genießt: Eine schnelle Suche deutet darauf hin, dass an dem Standard noch gearbeitet wird (?).

Ich kann Ihre eingebettete Frage beantworten: "Wie wird [multiplizieren] berechnet?"

Multiplizieren ist genau das, was sich anhört: L1 * L2, wobei L1, L2 -> Pixelhelligkeit für Layer 1 und Layer 2 pro Kanal .

TLDNR; für jeden Farbkanal Vn = ((V1/255) * (V2/255)) * 255

Um dies zu testen, können Sie in eine Kanalpalette wechseln und den roten Kanal auswählen. Verwenden Sie die Pipette auf einem Pixel aus jeder reinen Farbe und notieren Sie sich den Wert "Helligkeit" für jeden unter dem HSB-Farbmodell. Tun Sie dies für jeden Kanal. Beachten Sie, dass B ein Prozentsatz ist, notieren Sie also die Dezimaldarstellung (dh schreiben Sie nicht '95', schreiben Sie ".95").

Multiplizieren Sie für jeden Kanal die beiden aufgezeichneten Werte, notieren Sie das Ergebnis. Konvertieren Sie zurück in eine Ganzzahl, indem Sie den Rest abschneiden.

Erstellen Sie eine neue Ebene, wählen Sie den roten Kanal aus und füllen Sie ihn mit einem Grau, sodass H = 0, S = 0 und B Ihr neuer Wert ist. Machen Sie dasselbe für die grünen und blauen Kanäle. Ihre neue Farbe (sampeln Sie sie in vollem RGB) sollte dem genauen Farbwert Ihrer Schnittmenge (der # 35111F in Ihrer Frage) sehr nahe kommen.

Jetzt, da Sie wissen, wie es erreicht wird, ist es möglicherweise möglich, es mit anderen Softwaremethoden zu reproduzieren, die für Ihre Anwendung geeignet sind.

In Ihrem Beispielbild geht es darum, ein neues Quadrat hinzuzufügen, aber diese Workaround-Methode wird wirklich haarig, je komplexer Ihre Kunst ist.

Ich suche Rat bei der Arbeit mit SVG-Filtern - genauer gesagt multiplizieren
AntwortenHierDatenschutz-Bestimmungen1y, 0v