color - Enmascarar una imagen con texto seleccionable con SVG-¿es posible?

polygon background css

Question

Un buen efecto tipográfico a menudo visto en los titulares de revistas, etc., es seleccionar una fuente realmente audaz y poner una imagen dentro del texto. Aquí hay un ejemplo al azar del efecto:

En el diseño web, no hay forma de hacerlo con html / css / js simples. Se podría hacer con flash o con una imagen de mapa de bits, pero esas técnicas obviamente tienen algunos inconvenientes importantes.

Me pregunto si es posible hacer esto con SVG sin embargo? Nunca he usado SVG, pero si esto es posible, podría valer la pena tratar de entenderlo.

Por ejemplo, ¿sería posible dejar que un javascript recorra la página y buscar ciertos elementos (h1s o ciertas clases) y generar, sobre la marcha, un archivo SVG que contenga texto seleccionable en la fuente elegida con una imagen recortada al formas de letras? ¿Alguien sabe si esto se ha hecho, tutoriales, cualquier otra cosa que pueda ser interesante para mirar este problema ...

Answer 1

Es posible hacer esto con SVG, aunque no necesita hacer enmascaramiento, solo puede especificar la imagen como un patrón:

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

Luego haz referencia a eso como relleno en tu texto:

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

He hecho un ejemplo , la parte más dolorosa fue averiguar qué patternUnits y patternContentUnits realmente hicieron, este artículo de MDC fue útil .

El texto es seleccionable en Opera y Chrome (y, supongo, Safari) ̶b̶u̶t̶ ̶n̶o̶t̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ Saf̶ Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf Saf . SVG no funciona en IE (hasta que 9 salga, de todos modos), así que no te molestes con él o ve si puedes hacer que VML haga cosas similares. Si va a intentar crear una utilidad de JavaScript para hacer esto, un buen punto de partida podría ser calcular cómo hacer que lo anterior funcione en Raphaël .

Answer 2

Prueba esto ;)

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

aquí es lo mismo en jsfiddle http://jsfiddle.net/nedudi/v84p5/1/