Маскировка изображения с выбираемым текстом с помощью SVG - возможно? - PullRequest
Новая
       8

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

8 голосов
/ 03 сентября 2010

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

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

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

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

Ответы [ 2 ]

12 голосов
/ 03 сентября 2010

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

.
0 голосов
/ 25 декабря 2013

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

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

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

...