Возможно маскирование изображения с возможностью выбора текста с помощью SVG?

Один аккуратный типографский эффект, часто замеченный заголовками в журналах и т.д., заключается в том, чтобы выбрать действительно жирный шрифт и поместить изображение внутри текста. Здесь случайный пример эффекта:

В веб-дизайне нет способа сделать это с помощью простого html/css/js. Это можно сделать со вспышкой или с растровым изображением, но эти методы, очевидно, имеют некоторые большие недостатки.

Интересно, можно ли это сделать с помощью SVG? Я никогда не использовал SVG, но если это возможно, возможно, стоит попытаться обернуть вокруг него голову.

Например, можно ли позволить javascript проходить через страницу и искать определенные элементы (h1s или определенные классы) и генерировать на лету SVG файл, содержащий выбранный текст в выбранном шрифте с изображением обрезаны до формы буквы? Кто-нибудь знает, если это было сделано, учебники, что-нибудь еще, что может быть интересно для изучения этой проблемы...

Ответ 1

Это можно сделать с помощью SVG, хотя вам не нужно делать маскировку, вы можете просто указать изображение как шаблон:

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

Затем укажите, что заполнить в тексте:

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

Я сделал пример, самой болезненной частью было выяснение того, что действительно делали patternUnits и patternContentUnits, эта статья MDC была полезной.

Текст можно выбрать в Opera и Chrome (и, я полагаю, 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̶ ( теперь исправлена ошибка, ожидайте, что он будет работать в Firefox 24 или около того). SVG не работает в IE (до тех пор, пока 9 не выйдет, так или иначе), чтобы либо не беспокоиться об этом, либо посмотреть, можете ли вы заставить VML делать подобные вещи. Если вы попытаетесь создать утилиту JavaScript, чтобы сделать это, то хорошей отправной точкой может стать определение того, как сделать вышеуказанную работу в Raphaël.

Ответ 2

Попробуйте это;)

<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="#" onclick="location.href='http://beerhold.it/500/500'; return false;"/>
    </g>
  </defs>
  <g >
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/>
  </g>
</svg>

здесь то же самое в jsfiddle http://jsfiddle.net/nedudi/v84p5/1/