Mascherare un'immagine con testo selezionabile con SVG - possibile?

Un chiaro effetto tipografico, spesso visto nei titoli delle riviste ecc., È quello di selezionare un carattere davvero in grassetto e inserire un'immagine all'interno del testo. Ecco un esempio casuale dell'effetto: alt text Mascherare un'immagine con testo selezionabile con SVG - possibile?

Nel web design, non c'è modo di farlo con semplice html/css/js. Potrebbe essere fatto con il flash o con un'immagine bitmap, ma quelle tecniche ovviamente hanno alcuni grossi inconvenienti.

Mi chiedo se è possibile farlo con SVG? Non ho mai usato SVG, ma se questo è possibile, potrebbe valere la pena provare a capirlo.

Ad esempio, sarebbe possibile consentire a un javascript di scorrere la pagina e cercare determinati elementi (h1 o determinate classi) e generare, al volo, un file SVG che contiene testo selezionabile nel carattere scelto con un immagine ritagliata sulle forme delle lettere? Qualcuno sa se questo è stato fatto, tutorial, qualsiasi altra cosa che potrebbe essere interessante per guardare questo problema ...

fonte

2010-09-03 last-child

È possibile farlo con SVG, anche se non è necessario fare il mascheramento, è possibile basta specificare l'immagine come un modello:

<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>

quindi fare riferimento a che, come la fill nel testo:

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

ho fatto an example, la parte più dolorosa è stata capire che cosa patternUnits e patternContentUnits lo ha effettivamente fatto, this MDC article was helpful.

Il testo è selezionabile in Opera e Chrome (e, presumo, Safari), ma non Firefox per un ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (bug ora risolto, si aspettano di lavorare in Firefox 24 o giù di lì). SVG non funziona in IE (fino a quando non esce 9), quindi o non dargli fastidio o vedere se riesci a far fare a VML cose simili. Se hai intenzione di provare a creare un'utilità JavaScript per fare ciò, un buon punto di partenza potrebbe essere capire come fare il lavoro sopra in Raphaël.

fonte

2010-09-03 13:40:32 robertc

Grazie! Questo è esattamente quello che stavo cercando. Darò una lunga buona occhiata a quello che hai fatto e ottenere i miei piedi bagnati con svg. Sono sorpreso che questo effetto non venga usato di più se è così semplice; è una limitazione così ovvia nelle possibilità standard di css/html ... –

@ last-child Penso che vedremo diverse funzionalità SVG introdotte in HTML/CSS standard - è lo stesso motore di rendering, dopotutto, il codice per ottenere l'effetto è già presente nella maggior parte dei browser, proprio come diverse funzioni di Canvas (ombre, trasformazioni) ora fanno parte dei CSS. – robertc

Molto bello! Grazie! – Kriem

Prova questa;)

<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>

qui è la stessa in jsfiddle http://jsfiddle.net/nedudi/v84p5/1/

fonte

2013-12-24 22:45:32 Nedudi

Mascherare un'immagine con testo selezionabile con SVG - possibile?

risposta

Problemi correlati