Ich arbeite mit SVG mit der Raphael -Bibliothek. Ich kann eine Füllfarbe auf ein Objekt wie folgt anwenden:
%Vor%Und das funktioniert auch (obwohl die Raphael-Dokumentation es nicht erwähnt):
%Vor%Ich kann transparente PNGs als Füllmuster verwenden, und Transparenz funktioniert wie erwartet. Das Svg-Objekt ist vollständig transparent, wenn das Füllmusterbild transparent ist. Aber ich möchte sowohl ein Füllmusterbild als auch eine Füllfarbe angeben, so dass die Farbe durchsichtig ist, wo das Musterbild transparent ist - ähnlich wie die Eigenschaft "background" beispielsweise mit CSS. Ist das mit SVG möglich?
Sie können ein Muster definieren, das ein Rect mit einer Füllung und ein Bild, das Ihr Png über dem Rect ist, hat. Verwenden Sie dann das Muster als Füllung für den Kreis (oder das gewünschte Element).
Das bedeutet, außerhalb von Raphaël zu gehen oder es zu erweitern, um zu tun, was Sie wollen. Beachten Sie, dass ({fill: "url(pattern.png)"}) ein Musterelement erstellt und ein Bildelement an die angegebene URL anfügt. Es ist durchaus möglich, Raphaël zu hacken, damit Sie auch eine Farbe übergeben können, und dann behandeln Sie das im Code, der das Muster erstellt, indem Sie ein Rechteck mit denselben Abmessungen wie das Bild mit der angegebenen Füllfarbe erstellen.
Ich sollte sagen, dass wenn Sie möchten, dass es mit IE & lt; 9 funktioniert, Sie es wahrscheinlich auch in VML implementieren müssen.
Andere Optionen umfassen das Zeichnen von zwei Formen, eine mit Farbfüllung und die andere mit der Rasterbildfüllung. Ein weiterer Grund ist, dass der PNG die Hintergrundfarbe enthält, so dass sie nicht transparent ist.
Tags und Links svg png raphael transparency fill