Masquage d'une image avec du texte sélectionnable avec SVG - possible?

Un effet typographique propre souvent vu les titres dans les magazines, etc, est de sélectionner une police vraiment gras et mettre une image à l'intérieur du texte. Voici un exemple aléatoire de l'effet: alt text Masquage d'une image avec du texte sélectionnable avec SVG - possible?

En conception web, il n'y a aucun moyen de le faire avec html/css/js. Cela pourrait être fait avec flash ou avec une image bitmap mais ces techniques ont évidemment de gros inconvénients.

Je me demande si c'est possible avec SVG? Je n'ai jamais utilisé SVG, mais si cela est possible, ça vaudrait la peine d'essayer d'en faire le tour. Par exemple, serait-il possible de laisser un javascript parcourir la page et rechercher certains éléments (h1s ou certaines classes) et générer, à la volée, un fichier SVG contenant du texte sélectionnable dans la police choisie avec un image accrochée aux formes de la lettre? Est-ce que quelqu'un sait si cela a été fait, tutoriels, tout ce qui pourrait être intéressant pour regarder ce problème ...

Source

2010-09-03 last-child

Il est possible de le faire avec SVG, même si vous n'avez pas besoin de faire du masquage, vous pouvez il suffit de spécifier l'image comme motif:

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

la référence alors que le fill dans votre texte:

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

Je l'ai fait an example, la partie la plus douloureuse a été de déterminer ce que patternUnits et patternContentUnits réellement fait, this MDC article was helpful.

Le texte peut être sélectionné dans Opera et Chrome (et, je présume, Safari) et non FireFox en raison d'un ̶ l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶ (bug maintenant corrigé, attendez-vous à travailler dans Firefox 24 environ). SVG ne fonctionne pas dans IE (jusqu'à ce que 9 sortent, de toute façon) donc soit ne vous embêtez pas avec cela ou voir si vous pouvez obtenir VML pour faire des choses similaires. Si vous essayez de construire un utilitaire JavaScript pour le faire, un bon point de départ pourrait être de savoir comment faire fonctionner ce qui précède en Raphaël.

Source

2010-09-03 13:40:32 robertc

Merci! C'est exactement ce que je cherchais. Je vais jeter un bon coup d'oeil à ce que vous avez fait et obtenir mes pieds mouillés avec svg. Je suis surpris que cet effet ne soit pas utilisé plus si c'est si simple; c'est une limitation évidente dans les possibilités standard de css/html ... –

@ last-child Je pense que nous verrons plusieurs fonctionnalités SVG apportées en HTML/CSS standard - c'est le même moteur de rendu après tout, le code pour réaliser l'effet est déjà présent dans la plupart des navigateurs - tout comme plusieurs fonctionnalités de Canvas (ombres, transformations) font maintenant partie de CSS. – robertc

Très bien! Merci! – Kriem

Essayez cette;)

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

ici est le même dans jsFiddle http://jsfiddle.net/nedudi/v84p5/1/

Source

2013-12-24 22:45:32 Nedudi

Masquage d'une image avec du texte sélectionnable avec SVG - possible?

Répondre

Questions connexes