Ein Bild mit auswählbarem Text mit SVG maskieren - möglich?
Ein hübscher typografischer Effekt, der häufig in Zeitschriften usw. zu sehen ist, ist die Auswahl einer wirklich fett gedruckten Schrift und das Einfügen eines Bildes in den Text. Hier ist ein zufälliges Beispiel für den Effekt:
Im Webdesign gibt es keine Möglichkeit, dies mit reinem html / css / js zu tun. Es könnte mit Flash oder mit einem Bitmap-Bild gemacht werden, aber diese Techniken haben offensichtlich einige große Nachteile.
Ich frage mich, ob es möglich ist, dies mit SVG zu tun? Ich habe SVG nie benutzt, aber wenn das möglich ist, könnte es einen Versuch wert sein, meinen Kopf darum zu wickeln.
Zum Beispiel wäre es möglich, ein Javascript durch die Seite laufen zu lassen und nach bestimmten Elementen (h1s oder bestimmten Klassen) zu suchen und spontan eine SVG-Datei zu generieren, die auswählbaren Text in der gewählten Schriftart mit einem Bild enthält an die Buchstabenformen angepasst? Weiß jemand, ob dies getan wurde, Tutorials, alles andere, was für das Betrachten dieses Problems interessant sein könnte ...
2 Antworten
Dies ist mit SVG möglich, obwohl Sie keine Maskierung durchführen müssen. Sie können das Bild einfach als Muster angeben:
%Vor%Beziehen Sie sich dann darauf, dass in Ihrem Text ausgefüllt wird:
%Vor% Ich habe ein Beispiel gemacht, der schmerzhafteste Teil war, herauszufinden, was% co_de ist % und patternUnits hat das tatsächlich getan, dieser MDC Artikel war hilfreich .
Der Text ist wählbar in Opera und Chrome (und ich vermute, Safari) ̶b̶u̶t̶ ̶n̶o̶t̶ ̶F̶i̶r̶e̶f̶o̶x̶ ̶b̶e̶c̶a̶u̶s̶e̶ ̶o̶f̶ ̶a̶ ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (Fehler jetzt behoben, erwarte, dass er in Firefox 24 oder so funktioniert). SVG funktioniert nicht in IE (bis 9 sowieso herauskommt), also entweder nicht damit umgehen oder sehen, ob Sie VML dazu bringen können, ähnliche Dinge zu tun. Wenn Sie versuchen, ein JavaScript-Hilfsprogramm zu erstellen, um dies zu tun, könnte ein guter Ausgangspunkt darin bestehen, herauszufinden, wie Sie die obige Arbeit in Raphaël erledigen können .