Masking an image with selectable text with SVG - possible?

Question

One neat typographic effect often seen headlines in magazines etc, is to select a really bold font and put an image inside of the text. Here\'s a random example of the effec

Answer 1

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>

here is the same in jsfiddle http://jsfiddle.net/nedudi/v84p5/1/

Answer 2

It is possible to do this with SVG, though you don't need to do masking, you can just specify the image as a pattern:

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

Then reference that as the fill in your text:

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

I've done an example, the most painful part was figuring out what patternUnits and patternContentUnits actually did, this MDC article was helpful.

The text is selectable in Opera and Chrome (and, I presume, 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̶ (bug now fixed, expect it to work in Firefox 24 or so). SVG doesn't work in IE (until 9 comes out, anyway) so either don't bother with it or see if you can get VML to do similar things. If you're going to try and build a JavaScript utility to do this a good starting point might be figuring our how to make the above work in Raphaël.