Maskierung eines Bildes mit auswählbarem Text mit SVG - möglich?

Ein sauberer typografischer Effekt, der häufig in Zeitschriften usw. zu sehen ist, besteht darin, eine wirklich fett gedruckte Schriftart auszuwählen und ein Bild in den Text einzufügen. Hier ist ein zufälliges Beispiel für den Effekt: alt text Maskierung eines Bildes mit auswählbarem Text mit SVG - möglich?

Im Web-Design gibt es keine Möglichkeit, dies mit plain 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 sich lohnen, den Kopf einzuwickeln.

Zum Beispiel wäre es möglich, ein Javascript durch die Seite gehen zu lassen und nach bestimmten Elementen (h1s oder bestimmten Klassen) zu suchen und spontan eine SVG-Datei mit wählbarem Text in der gewählten Schriftart zu generieren Bild an die Buchstabenformen angepasst? Weiß jemand, ob dies getan wurde, Tutorials, alles andere, was für das Betrachten dieses Problems interessant sein könnte ...

Quelle

2010-09-03 last-child

Es ist möglich, dies mit SVG zu tun, obwohl Sie keine Maskierung tun müssen, können Sie nur das Bild als ein Muster angeben:

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450"> 
     <image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0" 
      width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php--> 
    </pattern> 
</defs>

Dann verweisen, die als fill in Ihrem Text:

<text fill="url(#img1)">

I an example, der schmerzhafteste Teil war, herauszufinden, was patternUnits undgetan habe 0 tat tatsächlich, this MDC article was helpful.

Der Text ist frei wählbar in Opera und Chrome (und ich nehme an, Safari), aber nicht Firefox ein ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (Bug behoben, erwarten, dass es in Firefox 24 oder so arbeiten). 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, könnte dies ein guter Ausgangspunkt sein, um herauszufinden, wie Sie die obigen Schritte in Raphaël ausführen können.

Quelle

2010-09-03 13:40:32 robertc

Vielen Dank! Genau das habe ich gesucht. Ich werde einen langen Blick darauf werfen, was du getan hast, und meine Füße mit Svg nass machen. Ich bin überrascht, dass dieser Effekt nicht mehr verwendet wird, wenn es so einfach ist; es ist so eine offensichtliche Einschränkung in den Standard-CSS/HTML-Möglichkeiten ... –

@ last-child Ich denke, wir werden sehen, einige SVG-Funktionen in Standard-HTML/CSS gebracht - es ist die gleiche Rendering-Engine schließlich der Code, um den Effekt zu erzielen ist bereits in den meisten Browsern vorhanden - genau wie einige Canvas-Funktionen (Schatten, Transformationen) jetzt Teil von CSS sind. – robertc

Sehr nett! Vielen Dank! – Kriem

Try this;)

<svg> 
    <defs> 
    <clipPath id="textClip"> 
     <text id="text1" x="20" y="300" style="font-family: Arial; font-weight: bold;font-size: 180pt; stroke: black; fill: none;">HEY</text> 
    </clipPath> 
    <g id="shapes"> 
     <image id="resultImg" preserveAspectRatio="xMidYMid meet" width="520px" height="520px" xlink:href="http://beerhold.it/500/500"/> 
    </g> 
    </defs> 
    <g > 
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/> 
    </g> 
</svg>

hier das gleiche ist in jsfiddle http://jsfiddle.net/nedudi/v84p5/1/

Quelle

2013-12-24 22:45:32 Nedudi

Maskierung eines Bildes mit auswählbarem Text mit SVG - möglich?

Antwort

Verwandte Themen