Chciałbym wykorzystać SVG do uzyskania tekstu z nałożonym wzorem. Napotykam jednak problem z szerokością elementu. Jak wiadomo SVG jest traktowane bardziej jako dokument niż obraz, zatem jego wymiary nie są tak jasną sprawą. Oczywiście przeskalowanie zawartości do wielkości elementu nie jest problemem i było już wielokrotnie opisywane, jednak mi chodzi o sytuację odwrotną. Przygotowałem przykład, który pokazuje w czym rzecz:

CodePen

Czerwona ramka otacza svg, który ma takie, a nie inne wymiary w zależności od przeglądarki, u mnie pod FF jest to domyślne 300x150px, jednak wysokość jest na stałe ustalona na 25px. Zależy mi, aby:
1. Szerokość elementu svg dopasowała się do zawartości, czyli do szerokości elementu text
2. Szerokość h2 również dopasowała się do tej szerokości

Myślę, że obydwa można osiągnąć za jednym razem (ustawienie width dla svg, rozwiązuje problem), jednak długość tekstu będzie zmienna, więc użycie stałego width odpada. Oczywiście jest możliwość użycia JS, do dynamicznego pobrania szerokości elementu text i ustawienia jej dla svg, ale szukam lepszego rozwiązania nie wymagającego użycia JS. Może użycie <img /> jakoś polepszy sprawę ? Tyle, że wzór na tekście ma być animowany, co łatwiej jest osiągnąć na <svg>. Macie jakieś pomysły ?

Kiedy z elementu SVG jest usunięty atrybut szerokości (i/lub wysokości), ten zachowuje się trochę jak responsywny - jego płótno wypełnia cały kontener.
Czemu chcesz użyć do tego SVG?

A co innego proponujesz ? background-clip nadal jest słabo obsługiwany, a svg daje większe możliwości zabawy z tekstem.

Nie wiem jaki efekt chcesz osiągnąć.

Duże obrazkowe tło -> h2 z background-color -> PHP optymalnie wycina obrazek -> SVG go nakłada na tekst = efekt "przezroczystego" tekstu. Potem udawany parallax na tło, żeby poruszało się przy scrollu, h2 fixed i równoczesne przesuwanie pozycji patternu nakładanego na tekst = efekt przezroczystego tekstu przy aktywnym tle.

Generalnie to zostaje chyba tylko canvas. Tympanus nie zawodzi, jednak już na przykładach widać, że nawet na najnowszym FF nie działa. Tak teraz się zastanawiam, skoro background-clip ma fallback na SVG, na którym nie da się wymusić dopasowania szerokości, a canvas i tak potrzebuje JS, to czy nie zostać przy SVG i już ustawiać width przez JS. Które rozwiązanie może być najwydajniejsze przy założeniu, że pattern trzeba będzie przesuwać ?

Nie do końca rozumiem, ale podrzucam:
http://stackoverflow.com/a/29747686